指令详解

指令定义

**指令：**可以简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。

通过app.directive() 方法自定义指令，这个方法可以接受两个参数，第一个是指令名称，第二个是一个函数这个函数返回一个对象，在对象中定义详细的指令信息。

angular.module('myApp', [])
.directive('myDirective', function() {return {restrict: String,priority: Number,terminal: Boolean,template: String or Template Function:function(tElement, tAttrs) {...},templateUrl: String,replace: Boolean or String,scope: Boolean or Object,transclude: Boolean,controller: String orfunction(scope, element, attrs, transclude, otherInjectables) { ... },controllerAs: String,require: String,link: function(scope, iElement, iAttrs) { ... },compile: // 返回一个对象或连接函数，如下所示：function(tElement, tAttrs, transclude) {return {pre: function(scope, iElement, iAttrs, controller) { ... },post: function(scope, iElement, iAttrs, controller) { ... }}// 或者return function postLink(...) { ... }}};
}); 

指令的加载：
① 当AngularJS启动应用时，会以第一个字符串参数为名来注册第二个参数返回的对象。
② AngularJS编译器会解析主HTML的DOM中的元素、属性、注释和CSS类名中使用了这个名字的地方，并在这些地方引用对应的指令。当它找到某个已知的指令时，就会在页面中插入指令所对应的DOM元素。

指令参数

restrict（字符串）

restrict是一个可选的参数，用于定义这个指令在DOM中可以何种形式被声明。默认AngularJS认为restrict的值是A，即以属性的形式来进行声明。
可选值如下：
E（元素）：
A（属性，默认值）：

C（类名）：
M（注释）： <–directive:my-directive expression–>

注意：属性是用来声明指令最常用的方式，因为它能在包括老版本的IE浏览器在内的所有浏览器中正常工作，并且不需要在文档头部注册新的标签，尽量避免用注释方式来声明属性。

priority优先级（数值型）

优先级参数可以被设置为一个数值，默认值是0。
有些场景设置高优先级是非常重要甚至是必须的。例如，ngRepeat将这个参数设置为1000，这样就可以保证在同一元素上，它总是在其他指令之前被调用。

注意：如果一个元素上具有两个优先级相同的指令，声明在前面的那个会被优先调用。如果其中一个的优先级更高，则不管声明的顺序如何都会被优先调用：具有更高优先级的指令总是优先运行。

terminal（布尔型）

terminal是一个布尔型参数，可以被设置为true或false。
这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。

template（字符串或函数）

template参数是可选的，必须被设置为以下两种形式之一：
 一段HTML文本；
 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。

注意： 如果模板字符串中含有多个DOM元素，或者只由一个单独的文本节点构成，那它必须被包含在一个父元素内。换句话说，必须存在一个根DOM元素。

templateUrl（字符串或函数）

templateUrl是可选的参数，可以是以下类型：
 一个代表外部HTML文件路径的字符串；
 一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个外部HTML文件路径的字符串。
无论哪种方式，模板的URL都将通过AngularJS内置的安全层，特别是$getTrusted ResourceUrl，这样可以保护模板不会被不信任的源加载。

replace（布尔型）

replace是一个可选参数，值必须为true或false，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部。

scope参数（布尔型或对象）

scope参数是可选的，可以被设置为true或一个对象。默认值是false。

scope:false

如下图所示，设置了scope:false，指令外部也可以访问到指令内部才定义的属性，会污染父作用域。

scope:true

当scope设置为true时，会从父作用域继承并创建一个新的作用域对象。例如：内置指令ng-controller的作用，就是从父级作用域继承并创建一个新的子作用域。它会创建一个新的从父作用域继承而来的子作用域。

如下图所示，设置了scope:true，指令继承父作用域并创建了一个子作用域，可以访问到父作用域中的属性，但是指令外部访问不到指令内部作用域的属性。

scope:对象

创建具有隔离作用域的指令需要将scope属性设置为一个空对象{}。如果这样做了，指令的模板就无法访问外部作用域了。

具有隔离作用域的指令最主要的使用场景是创建可复用的组件，组件可以在未知上下文中使用，并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

如下图，myDirective指令设置了隔离作用域，在指令内部访问不到父作用域的属性。

transclude

controller（字符串或函数）

controller参数可以是一个字符串或一个函数。当设置为字符串时，会以字符串的值为名字，来查找注册在应用中的控制器的构造函数。

angular.module('myApp', [])
.directive('myDirective', function() {restrict: 'A', // 始终需要controller: 'SomeController'
})
// 应用中其他的地方，可以是同一个文件或被index.html包含的另一个文件
angular.module('myApp')
.controller('SomeController', function($scope, $element, $attrs, $transclude) {// 控制器逻辑放在这里
});

可以在指令内部通过匿名构造函数的方式来定义一个内联的控制器：

angular.module('myApp',[])
.directive('myDirective', function() {restrict: 'A',controller:function($scope, $element, $attrs, $transclude) {// 控制器逻辑放在这里}
}); 

controllerAs（字符串）

controllerAs参数用来设置控制器的别名，可以以此为名来发布控制器，并且作用域可以访问controllerAs。这样就可以在视图中引用控制器，甚至无需注入$scope。

这个参数给了我们可以在路由和指令中创建匿名控制器的强大能力。这种能力可以将动态的对象创建成为控制器，并且这个对象是隔离的、易于测试的。

例如，可以在指令中创建匿名控制器，如下所示：

angular.module('myApp')
.directive('myDirective', function() {return {restrict: 'A',template: '<h4>{{ myController.msg }}</h4>',controllerAs: 'myController',controller: function() {this.msg = "Hello World"}};
}); 

require（字符串或数组）

require参数可以被设置为字符串或数组，字符串代表另外一个指令的名字。require会将控制器注入到其值所指定的指令中，并作为当前指令的链接函数的第四个参数。