使用.directive()方法來注冊(cè)一個(gè)新指令
傳入兩個(gè)參數(shù)踩官，第一個(gè)參數(shù)傳入一個(gè)字符串吆豹，作為指令的名字哎媚；第二個(gè)參數(shù)是一個(gè)函數(shù)租漂，該函數(shù)返回一個(gè)對(duì)象，返回的對(duì)象中包含了用來定義和配置指令所需的方法和屬性颊糜。
基本使用
創(chuàng)建一個(gè)自定義元素my-directive
// index.html
<my-directive></my-directive>
// app.js
var app = angular.module('myApp', []);
app.directive('myDirective', function() {
return {
restrict: 'E',
template: '<dir>Nari</dir>'
};
});
創(chuàng)建的指令在html文件中不僅可以用作元素哩治，還可以作為屬性，類或者注釋使用
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->
restrict設(shè)置以哪種方式調(diào)用：元素（E） 衬鱼、屬性（A） 业筏、類（C）、注釋（M）
向指令傳遞數(shù)據(jù) scope： {}
template可接受變量的形式：template: '<dir>{{ varName }}</dir>'
在html文件中鸟赫，可以給指令添加var-name屬性蒜胖，該參數(shù)會(huì)成為指令內(nèi)部作用域的屬性
雙向綁定的問題：如果是在事件處理函數(shù)（event handler）中改變了綁定model，需要手動(dòng)觸發(fā)digest抛蚤，因?yàn)檫@是發(fā)生在angular范圍之外台谢，所以scope無法知道m(xù)odel的變化，如下：
element.on('click', function() {
$scope.modal = newModal;
$scope.$apply();
})
// index.html
<div my-directive var-name="Nari"></div>
// app.js
app.directive('myDirective', function() {
return {
restrict: 'A',
replace: true,
// 使用隔離作用域岁经，創(chuàng)建指令自己的$scope屬性
scope: {
varName: '@'朋沮，
varName: '='，
varName: '&'
},
template: '<dir>{{ varName }}</dir>'
};
});
綁定策略
'@'： 表示AngularJS將DOM中var-name屬性的值復(fù)制給新作用域?qū)ο笾械膙arName屬性缀壤，var-name屬性改變樊拓，作用域?qū)ο笾械膙arName屬性會(huì)自動(dòng)更新
'='： 表示在指令的作用域和其他model作用域建立了一個(gè)雙向數(shù)據(jù)綁定
'&'： 表示在指令的作用域和其他model作用域進(jìn)行綁定纠亚，調(diào)用其函數(shù)
綁定函數(shù)的傳參方式有兩種：
// 第一種：指令中調(diào)用函數(shù)時(shí)傳入一個(gè)對(duì)象，對(duì)象的屬性名是html中對(duì)應(yīng)的參數(shù)名
// index.html
<div my-directive callback-fun="doSomething(argName)"></div>
// app.js
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
callbackFun: '&'
},
link: function(scope, ele, attrs) {
// 傳入一個(gè)對(duì)象
scope.callbackFun({argName: value})
}
};
});
// 第二種：html中指定函數(shù)名筋夏，在指令中調(diào)用函數(shù)時(shí)傳參
// index.html
<div my-directive callback-fun="doSomething"></div>
// app.js
app.directive('myDirective', function() {
return {
restrict: 'A',
scope: {
callbackFun: '&'
},
link: function(scope, ele, attrs) {
// scope.callbackFun()相當(dāng)于獲取該函數(shù)引用蒂胞，然后正常調(diào)用函數(shù)
scope.callbackFun()(arg1, arg2, ...)
}
};
});
模板 template templateUrl
定義指令模板，
template指定模板HTML字符串
templateUrl可以指定模板路徑或者一個(gè)函數(shù)条篷，函數(shù)可以接受兩個(gè)參數(shù)tElement和tAttrs骗随，并返回一個(gè)代表模板的字符串
引入外部指令 require
查找該值對(duì)應(yīng)的指令，將查找到的指令的控制器注入到當(dāng)前指令中
尋找策略：
拥娄？策略——尋找指令名稱蚊锹，如果沒有找到，link函數(shù)第4個(gè)參數(shù)為null稚瘾；如果沒有牡昆？，則報(bào)錯(cuò)摊欠。
**^ **策略——在自身指令尋找指令名稱的同時(shí)丢烘，向上父元素尋找；如果沒有^些椒，則僅在自身尋找播瞳。
指令控制器 controller controllerAs
可定義一個(gè)匿名函數(shù)或傳入一個(gè)控制器名
指令的控制器和link函數(shù)可以進(jìn)行互換∶飧猓控制器主要是用來提供可在指令間復(fù)用的行為,但link函數(shù)只能在當(dāng)前內(nèi)部指令中定義行為,且無法在指令間復(fù)用赢乓。
controller: function($scope, $element, $attrs){
// 可以注入一些服務(wù)，$scope就是當(dāng)前作用域石窑，$element當(dāng)前指令對(duì)應(yīng)的元素牌芋，$attrs當(dāng)前元素的屬性組成的對(duì)象
}
優(yōu)先級(jí)控制 terminal
可以被設(shè)置為true或false，設(shè)為true時(shí)會(huì)使AngularJS停止運(yùn)行當(dāng)前元素上比本指令優(yōu)先級(jí)低的指令松逊。但同當(dāng)前指令優(yōu)先級(jí)相同的指令還是會(huì)被執(zhí)行
