Angular指令学习

指令概览

指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径.

指令详解

指令的全部设置选项：

    angular.module('myApp', [])                .directive('myDirective', function() {                       return {                       //指令在DOM中以何种方式声明 A:属性（默认） E：元素 C：类名 M：注释（少用）                            restrict: String,                       //在同一个元素上的指令调用顺序                                priority: Number,                       //设为false时，同一元素上比该指令优先级低的指令不再执行                         terminal: Boolean,                      //HTML文本或模板函数                           template: String or Template Function:                                        function(tElement, tAttrs) (...},                      //HTML文件路径                   templateUrl: String,                      //默认false，true时取代元素                       replace: Boolean or String,                       //值为false时：我们创建的指令和父作用域共享一个model模型；值为true时： 创建新作用域初始化为父作用域 ，与父作用域不是同一个作用域；在指令已声明parentName的情况下，父域parentName变更，指令中parentName不会发生变化。在指令未声明parentName的情况下，父域的parentName变更，指令中parentName也会刷新;值为 {}时：  创建隔离作用域 ，需要使用绑定与外部交互。                                scope: Boolean or Object,                     //true时将指令内部的元素嵌入到模板内ng-transclude处                     transclude: Boolean,                     //设置各个作用域scope                      controller: String or function(scope, element, attrs,                              transclude,  otherInjectables) { ... },                  controllerAs: String,                   //指令获得外部其他指令的控制器                     require: String,                     //用link函数创建可以操作DOM的指令                     link: function(scope, iElement, iAttrs) { ... },                  // 返回一个对象或连接函数，                              compile:                                    function(tElement, tAttrs, transclude) {                                        return {                                           pre: function(scope, iElement, iAttrs, controller) { ... },                                         post: function(scope, iElement, iAttrs, controller) { ... }                                       }               };});

向指令中传递数据（scope={}）

最简单的方法就是使用指令所属的控制器提供的已经存在的作用域。缺点：如果控制器被移除，或者控制器中有相同的属性名，我们都必须得修改代码。
AngularJS通常作法是创建一个新的子作用域或者隔离作用域来解决这个问题。通过将作用域内部的属性someProperty与DOM中的some-Property属性绑定来传值。

<div my-directivesome-property="something"></div>...scope: {someProperty: '@' //someProperty与some-Property绑定}

<div my-directivesome-attr="something"></div>...scope: {someProperty: '@someAttr' //someProperty与some-attr绑定}

绑定策略：@：单向，指令内部作用域可以使用外部作用域的变量
=：双向
&：绑定父作用域函数