angular指令Directive
$sce控制代碼安全檢查
為什么要要$sce锦针？因?yàn)锳ngularJS里很多地方仁堪，比如路徑默認(rèn)是個(gè)字符串阶捆，不會(huì)認(rèn)為是路徑倦卖，從而訪問不到我們需要的東西，那么我們就可以通過$sce告訴angualr這個(gè)路徑蕉斜，這樣是很安全的逾柿。它有以下幾種方法：
$sce.trustAs(type,name);
$sce.trustAsUrl(value);
$sce.trustAsHtml(value);
$sce.trustAsResourceUrl(value);
$sce.trustAsJs(value);
- ng-bind-html 這里只能放字符串類型的,需要將數(shù)據(jù)html編譯成$sce.trustAsHtml(html)
directive指令
directive(指令)是AngularJ非常強(qiáng)大功能之一。它就相當(dāng)于為我們寫了公共的自定義DOM元素或CLASS屬性或ATTR屬性宅此，并且還可以在它的基礎(chǔ)上來操作scope机错、綁定事件、更改樣式等父腕。通過這個(gè)Directive毡熏，我們可以封裝很多公共指令，比如分頁指令侣诵、自動(dòng)補(bǔ)全指令等等痢法。然后在HTML頁面里只需要簡(jiǎn)單的寫一行代碼就可以實(shí)現(xiàn)很多強(qiáng)大的功能。
指令分為兩類: 自帶指令 自定義指令
自定義指令:
裝飾型指令 賦予標(biāo)簽一些功能 link函數(shù)
組件式指令 把對(duì)應(yīng)標(biāo)簽 替換成一個(gè)組件 template
directive定義與用法
app.directive('panel',function () {
return {
restrict:'EA',
replace:false,
template:`<div><div>Hello</div><div>zfpx</div></div>`,
templateUrl:`tmpl/panel.html`,
link:function (scope,element,attrs) {//element即對(duì)應(yīng)的元素杜顺，attrs為該元素上的自定義屬性的集合
//
scope.name = attrs.st;
scope.title = attrs.title;
},
scope:{},
transclude:true
}
});
directive指令詳解：
- restrict:（字符串）限制使用范圍,取值有：E(元素),A(屬性),C(類),M(注釋)财搁，默認(rèn)范圍是'EA',范圍的標(biāo)識(shí)必須大寫
<my-drag></my-drag> <!--Element E-->
<div my-drag></div> <!--Attributes A-->
<div class="my-drag"></div> <!--Class C-->
<!-- directive:myDrag --> <!--Comment M 前后必須用空格，不建議使用-->
- replace:(布爾值)默認(rèn)值為false躬络，設(shè)置為true時(shí)候尖奔，將指令對(duì)應(yīng)的標(biāo)簽元素替換掉，要求模板只能有一個(gè)根節(jié)點(diǎn)
- template：(字符串)穷当，一段HTML文本提茁，用于替換或添加對(duì)用元素的模板
- templateUrl：(字符串)，一個(gè)代表HTML文件路徑的字符串馁菜，通過ajax獲取過來的
- scope：默認(rèn)值是false茴扁。
true表示繼承父作用域，并創(chuàng)建自己的作用域（子作用域）
{}表示創(chuàng)建一個(gè)全新的隔離作用域汪疮，不能繼承父級(jí)作用域
- link:function link(scope, element, attrs, controller) { ... }
鏈接函數(shù)負(fù)責(zé)注冊(cè)DOM事件和更新DOM峭火。它是在模板被克隆之后執(zhí)行的，它也是大部分指令邏輯代碼編寫的地方智嚷。
scope - 指令需要監(jiān)聽的作用域,自己家沒有作用域 scope為根作用域卖丸，如果自己家有 scope就是自己家的作用域
element - instance element - 指令所在的元素。只有在postLink函數(shù)中對(duì)元素的子元素進(jìn)行操作才是安全的盏道，因?yàn)槟菚r(shí)它們才已經(jīng)全部鏈接好稍浆。
attrs - instance attributes - 實(shí)例屬性，一個(gè)標(biāo)準(zhǔn)化的猜嘱、所有聲明在當(dāng)前元素上的屬性列表衅枫，這些屬性在所有鏈接函數(shù)間是共享的。
controller - 控制器實(shí)例泉坐，也就是當(dāng)前指令通過require請(qǐng)求的指令direct2內(nèi)部的controller为鳄。比如：direct2指令中的controller:function(){this.addStrength = function(){}}，那么腕让，在當(dāng)前指令的link函數(shù)中孤钦，你就可以通過controller.addStrength進(jìn)行調(diào)用了。
- transclude:(布爾)
如果不想讓指令元素內(nèi)部的內(nèi)容被模板替換纯丸，可以設(shè)置這個(gè)值為true偏形。會(huì)產(chǎn)生一個(gè)作用域，一般情況下需要和ng-transclude指令一起使用觉鼻。 比如：template:"<div>hello every <div ng-transclude></div></div>"俊扭，這時(shí)，指令元素內(nèi)部的內(nèi)容會(huì)嵌入到ng-transclude這個(gè)div中坠陈。也就是變成了<div>hello every <div>這是指令內(nèi)部的內(nèi)容</div></div>萨惑。默認(rèn)值為false捐康；這個(gè)配置選項(xiàng)可以讓我們提取包含在指令那個(gè)元素里面的內(nèi)容，再將它放置在指令模板的特定位置庸蔼。當(dāng)你開啟transclude后解总，你就可以使用ng-transclude來指明了應(yīng)該在什么地方放置transcluded內(nèi)容
- controller
可以是一個(gè)字符串或者函數(shù),若是為字符串，則將字符串當(dāng)做是控制器的名字姐仅，來查找注冊(cè)在應(yīng)用中的控制器的構(gòu)造函數(shù),可以注入一些特殊的服務(wù)（參數(shù)）:
$scope花枫，與指令元素相關(guān)聯(lián)的作用域
$element，當(dāng)前指令對(duì)應(yīng)的 元素
$attrs掏膏，由當(dāng)前元素的屬性組成的對(duì)象
$transclude劳翰，嵌入鏈接函數(shù)，實(shí)際被執(zhí)行用來克隆元素和操作DOM的函數(shù)
除非是用來定義一些可復(fù)用的行為馒疹，一般不推薦在這使用佳簸。指令的控制器和link函數(shù)可以進(jìn)行互換。區(qū)別在于行冰，控制器主要是用來提供可在指令間復(fù)用的行為但link鏈接函數(shù)只能在當(dāng)前內(nèi)部指令中定義行為溺蕉，且無法再指令間復(fù)用。
@悼做、=疯特、&局部 scope 屬性
scope值為{}時(shí)產(chǎn)生一個(gè)隔離作用域，隔離作用域可以通過綁定策略來訪問父作用域的屬性肛走，directive 在使用隔離 scope 的時(shí)候漓雅，提供了三種方法同隔離之外的地方交互
- @：綁定到當(dāng)前元素的屬性值到scope作用域中。屬性值是一個(gè)字符串朽色。
- =：綁定到當(dāng)前元素的屬性值到scope作用域中邻吞。屬性值是父作用域中的一個(gè)變量名。
- &：提供一種方式在父作用域執(zhí)行一個(gè)表達(dá)式（函數(shù)等）葫男。如果沒有指定attr名稱抱冷，則屬性名稱為相同的本地名稱。
