引言
指令(Directive)可以说是 AngularJS 的核心，而其开发也是比较困难的，本文主要介绍指令的一些参数和scope的绑定策略。
参数
从 AngularJS 的官方文档中看到指令的参数如下：
{
priority: 0,template: '<div></div>',// or // function(tElement,tAttrs) { ... },// or
// templateUrl: 'directive.html',transclude: false,restrict: 'A',scope: false,controller: function($scope,$element,$attrs,$transclude,otherInjectables) { ... },controllerAs: 'stringAlias',require: 'siblingDirectiveName',// or // ['^parentDirectiveName','?optionalDirectiveName','?^optionalParent'],compile: function compile(tElement,tAttrs,transclude) {
return {
pre: function preLink(scope,iElement,iAttrs,controller) { ... },post: function postLink(scope,controller) { ... }
}
// or
// return function postLink( ... ) { ... }
},// or
// link: {
// pre: function preLink(scope,// post: function postLink(scope,controller) { ... }
// }
// or
// link: function postLink( ... ) { ... }
}
下面详细讲解每个参数。
priority(Number)
指令执行的优先级，用于多个指令同时作用于同一个元素时。例如：
<select>
<option ng-repeat="i in [1,2]" ng-bind="i"></option>
</select>
上面的例子中，ng-repeat 指令和 ng-bind 指令同时作用于 option 元素，由于 ng-repeat 的 priority 为1000，ng-bind 的 priority 为0，因此先执行 ng-repeat，然后变量 i 的值才能用于 ng-bind 中。
template(String or Function)
HTML模板内容，用于下列情况之一：
值可以是：
一个 HTML 字符串。例如：
<div>my name is {{name}}</div>。
templateUrl(String or Function)
templateUrl 和 template 作用相同，但模板内容是从 $templateCache 服务或远程 url 加载。
值可以是：
-
一个字符串，
AngularJS会先从$templateCache中查找是否缓存了对应值，如果没有则尝试 ajax 加载。例如：在页面中有如下 script：<script type="text/ng-template" id="Hello.html"> <p>Hello</p> </script>AngularJS 会将
type="text/ng-template"的script标签中的内容以 id 值为 key 缓存到 $templateCache 服务中，此时可以设置templateUrl: 'Hello.html'。
transclude(Boolean)
官方文档的解释为：编译元素的内容，使其在指令内部可用。该选项一般和 ng-transclude 指令一起使用。
如果 transclude 设置为 true，则元素的内容会被放到模板中设置了 ng-transclude 指令的元素中。例如：
app.directive('testTransclude',[
function () {
return {
restrict: 'E',transclude: true,template:
'<div>\
<p>指令内部段落</p>\
<div ng-transclude></div>\
</div>'
};
}
]);
<test-transclude>
<p>该段落会被放到指令内部</p>
</test-transclude>
上面生成后的 DOM 结构为：
restrict(String)
指令的使用形式。
值可以为：
'E'- 指令作为元素使用'A'- 指令作为属性使用'C'- 指令作为类名使用'M'- 指令作为注释使用（不常用）
可以是以上值的组合，如 restrict: 'EA' 表示指令既可以作为属性使用，也可以作为元素使用。
scope(Boolean or Object)
关于 scope 选项将会在后面的指令 scope 中细说。
controller(Function)
一般情况下不需要使用指令的 controller，只要使用 link 就够了，后面会细说 link 函数。
用 controller 的场景是该指令（a）会被其他指令（b）require 的时候，在 b 的指令里可以传入 a 的这个 controller，目的是为了指令间的复用和交流。而 link 只能在指令内部中定义行为，无法做到这样。
controllerAs(String)
为控制器指定别名，这样可以在需要控制器的地方使用该名字进行注入。
require(String or Array)
表示指令依赖于一个或多个指令，并注入所依赖指令的控制器到 link 函数的第四个参数中。如果所依赖的指令不存在，或所依赖指令的控制器不存在则会报错。
依赖名称前缀可以为：
(没有前缀) - 在当前元素中查找依赖指令的控制器，如果不存在则报错。
?- 在当前元素中查找依赖指令的控制器，如果不存在传null到link中。^- 在当前元素及父元素中查找依赖指令的控制器，如果不存在则报错。?^- 在当前元素及父元素中查找依赖指令的控制器，如果不存在传null到link中。
例子：
app.directive('validate',[
function () {
return {
restrict: 'A',require: 'ngModel',link: function (scope,ele,attrs,ngModelCtrl) {
// 监听值变化
ngModelCtrl.$viewChangeListeners.push(function () {
scope.validateResult = ngModelCtrl.$viewValue === 'Heron';
});
}
};
}
]);
app.controller('myCtrl',[
'$scope','$cookieStore',function ($scope,$cookieStore) {
$scope.name = 'Heron';
$scope.sayHi = function (name,age) {
alert('Hello ' + name + ',your age is ' + age);
}
}
]);
<div ng-controller="myCtrl">
<input type="text" ng-model="name" validate>
<p>
validate 结果：{{validateResult}}
</p>
</div>
运行结果如图：
compile(Function) 和 link(Function)
创建的创建过程可以分为编译(compile)阶段和链接(link)阶段，因此两者放一起讲。
两者区别在于：
指令 scope
scope 选项有三种值：
false- 使用父scope。改变父scope会影响指令scope，反之亦然。true- 继承父scope，并创建自己的scope。改变父scope会影响指令scope，而改变指令scope不会影响父scope。{}- 不继承父scope，创建独立的scope。如果不使用双向绑定策略(后面会讲)，改变父scope不会影响指令scope，反之亦然。
例子：
app.controller('myCtrl',$cookieStore) {
$scope.scopeFalse = 'Heron';
$scope.scopeTrue = 'Heron';
$scope.scopeObject = 'Heron';
}
]);
app.directive('directiveFalse',[
function () {
return {
restrict: 'EA',template:
'<div>\
<p>\
<span>指令 scope: </span>\
<input type="text" ng-model="scopeFalse">\
</p>\
</div>'
};
}
]);
app.directive('directiveTrue',scope: true,template:
'<div>\
<p>\
<span>指令 scope: </span>\
<input type="text" ng-model="scopeTrue">\
</p>\
</div>'
};
}
]);
app.directive('directiveObject',scope: {},template:
'<div>\
<p>\
<span>指令 scope: </span>\
<input type="text" ng-model="scopeObject">\
</p>\
</div>',link: function (scope) {
// 由于使用独立scope，因此需要自己定义变量
scope.scopeObject = 'Heron';
}
};
}
]);
<div ng-controller="myCtrl">
<h3>scope: false</h3>
<p>
<span>父 scope: </span>
<input type="text" ng-model="scopeFalse">
</p>
<directive-false></directive-false>
<h3>scope: true</h3>
<p>
<span>父 scope: </span>
<input type="text" ng-model="scopeTrue">
</p>
<directive-true></directive-true>
<h3>scope: {}</h3>
<p>
<span>父 scope: </span>
<input type="text" ng-model="scopeObject">
</p>
<directive-object></directive-object>
</div>
运行结果如图：
针对独立 scope，可以通过在对象中声明如何从外部传入参数。有以下三种绑定策略：
-
@- 使用 DOM 属性值单项绑定到指令scope中。此时绑定的值总是一个字符串，因为DOM的属性值是一个字符串。<div my-directive age="26"></div> scope: { age: '@' } -
=- 在父scope和指令scope之间建立双向绑定。<div my-directive age="age"></div> scope: { age: '=' } -
&- 使用父scope的上下文执行函数。一般用于绑定函数。<div my-directive sayHi="sayHi()"></div> scope: { sayHi: '&' }
绑定函数时，有时需要向指令外部传递参数，如下：
app.controller('myCtrl',your age is ' + age);
};
}
]);
app.directive('myDirective',replace: true,scope: {
clickMe: '&'
},template:
'<div>\
<button class="btn btn-info" ng-click="clickMe({ age: age })">点我</button>\
</div>',link: function (scope) {
scope.age = 26;
}
};
}
]);
<div ng-controller="myCtrl">
<my-directive click-me="sayHi(name,age)"></my-directive>
</div>
运行结果如图：
说明一下：首先声明 clickMe: '&' 使用父 scope 的环境执行 clickMe 函数，然后在传递给指令时声明 click-me="sayHi(name,age)"，表示父 scope 的 sayHi 方法需要两个参数，一个是 name，一个是 age，然后再指令中使用对象 {} 的方式向外传递参数，如 ng-click="clickMe({ age: age })"，表示向指令外传递 age 参数，sayHi 方法从指令拿到 age 参数，再从自己的上下文中拿到 name 参数。
结语
AngularJS 指令的开发和使用千变万化，也有许多坑，希望大家留意，也希望大家能在评论区多多交流心得。
原文链接：https://www.f2er.com/angularjs/148111.html