使用.directive()方法来注册一个新指令
传入两个参数,第一个参数传入一个字符串,作为指令的名字;第二个参数是一个函数,该函数返回一个对象,返回的对象中包含了用来定义和配置指令所需的方法和属性。
基本使用
创建一个自定义元素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>'
};
});
创建的指令在html文件中不仅可以用作元素,还可以作为属性,类或者注释使用
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
<!--directive:my-directive-->
restrict设置以哪种方式调用:元素(E) 、属性(A) 、类(C)、注释(M)
向指令传递数据 scope: {}
template可接受变量的形式:template: '<dir>{{ varName }}</dir>'
在html文件中,可以给指令添加var-name属性,该参数会成为指令内部作用域的属性
双向绑定的问题:如果是在事件处理函数(event handler)中改变了绑定model,需要手动触发digest,因为这是发生在angular范围之外,所以scope无法知道model的变化,如下:
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,
// 使用隔离作用域,创建指令自己的$scope属性
scope: {
varName: '@',
varName: '=',
varName: '&'
},
template: '<dir>{{ varName }}</dir>'
};
});
绑定策略
'@': 表示AngularJS将DOM中var-name属性的值复制给新作用域对象中的varName属性,var-name属性改变,作用域对象中的varName属性会自动更新
'=': 表示在指令的作用域和其他model作用域建立了一个双向数据绑定
'&': 表示在指令的作用域和其他model作用域进行绑定,调用其函数
绑定函数的传参方式有两种:
// 第一种:指令中调用函数时传入一个对象,对象的属性名是html中对应的参数名
// 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) {
// 传入一个对象
scope.callbackFun({argName: value})
}
};
});
// 第二种:html中指定函数名,在指令中调用函数时传参
// 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()相当于获取该函数引用,然后正常调用函数
scope.callbackFun()(arg1, arg2, ...)
}
};
});
模板 template templateUrl
定义指令模板,
template指定模板HTML字符串
templateUrl可以指定模板路径或者一个函数,函数可以接受两个参数tElement和tAttrs,并返回一个代表模板的字符串
引入外部指令 require
查找该值对应的指令,将查找到的指令的控制器注入到当前指令中
寻找策略:
?策略——寻找指令名称,如果没有找到,link函数第4个参数为null;如果没有?,则报错。
**^ **策略——在自身指令寻找指令名称的同时,向上父元素寻找;如果没有^,则仅在自身寻找。
指令控制器 controller controllerAs
可定义一个匿名函数或传入一个控制器名
指令的控制器和link函数可以进行互换。控制器主要是用来提供可在指令间复用的行为,但link函数只能在当前内部指令中定义行为,且无法在指令间复用。
controller: function($scope, $element, $attrs){
// 可以注入一些服务,$scope就是当前作用域,$element当前指令对应的元素,$attrs当前元素的属性组成的对象
}
优先级控制 terminal
可以被设置为true或false,设为true时会使AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行