复制代码

.directive('hello',function ($templateCache) {        return{            restrict:'AEMC',//分别代表四种模式 attribute element comment class 前两种常用                        template:'
    
     Hi everyone!!!
    
',            replace:true        }    })复制代码

restrict代表的是四种模式： A：attribute 属性 E：element 元素 comment： 注释 class： css样式类

其中A、E是用的比较多的， 所以我看了很多人其实在restrict中设置的也是AE。

template的缓存机制： 可以将replace的网页保存在缓存中，方法如下：

.run(function ($templateCache) {            $templateCache.put('hello.html','
    
     Hi everyone!!!
    
')    })    .directive('hello',function ($templateCache) {        return{            restrict:'AEMC',//分别代表四种模式 attribute element comment class 前两种常用            template:$templateCache.get('hello.html'),            //template:'
    
     Hi everyone!!!
    
',            replace:true        }    })复制代码

指令的 执行机制：

加载：加载AngularJS，找到ng-app，确定边界。编译：遍历DOM，找到template，replace，transclude，compile，对Html中的内容进行替换。链接：执行link，在DOM中绑定数据和事件监听器。复制代码

directive中的controller和link的区别： controller一般是让让指令暴露出方法让外部调用。 link处理指令内部的事务。（绑定数据，绑定监听器。）

    
    
        
     
            
      
       动感超人--力量
              
     
    
    
    
    
        
     
            
      
       动感超人--力量+敏捷
              
     
    
    
    
    
        
     
            
      
       动感超人--力量+敏捷+发光
              
     
    
    
复制代码

.directive('superman',function () {        return{            scope:{},            restrict:'AE',            controller:function ($scope) {                $scope.abilities = [];                this.addStrength = function () {                    $scope.abilities.push('strength');                };                this.addSpeed = function () {                    $scope.abilities.push('speed');                };                this.addLight = function () {                    $scope.abilities.push('Light');                };            },            link:function (scope,element,attrs) {                element.addClass('btn btn-primary');                element.bind('mouseenter',function () {                    console.log(scope.abilities);                })            }        }    })    .directive('strength',function () {        return{            require:'^superman',            link:function (scope,element,attrs,supermanCtrl) {                supermanCtrl.addStrength();            }        }    })    .directive('speed',function () {        return{            require:'^superman',            link:function (scope,element,attrs,supermanCtrl) {                supermanCtrl.addSpeed();            }        }    })    .directive('light',function () {        return{            require:'^superman',            link:function (scope,element,attrs,supermanCtrl) {                supermanCtrl.addLight();            }        }    })复制代码

在第一个directive中，绑定的是superman标签，里面的controller就是把添加字符串到数组的方法暴露出来，让其他的directive可以调用。其他的directive通过require继承superman这个directive，在link中就能加入第四个参数，这里我起名是Supermanctrl，调用Supermanctrl就能用里面的方法，往数组里面加字符串，在前面绑定了时间，鼠标移动到上面，就会输出这个数组。

scope的三种绑定策略： @：把当前属性作为字符串传递。你还可以绑定来自外层scope的值，在属性值中插入{

@方式：复制代码

    
        
         
    
    
复制代码

.controller('MyCtrl',['$scope',function ($scope) {        $scope.ctrlFlavor = '百威';    }])    .directive('drink',function () {        return{            restrict:'AE',            scope:{                flavor:'@'            },            template:'
    
     {
    {flavor}}
    
'        }    })复制代码

=方式：

    
             Ctrl:        
     
        
             
     
        Directive:        
     
        
         
    
    
复制代码

.controller('MyCtrl2',['$scope',function ($scope) {        $scope.ctrlFlavor = '百威';    }])    .directive('drink2',function () {        return{            restrict:'AE',            scope:{                flavor:'=',            },            template:''        }    })复制代码

&方式：

    
        
             
             
         
    
复制代码

.controller('MyCtrl3',['$scope',function ($scope) {        $scope.sayHello = function (name) {            alert('hello'+name);        }    }])    .directive('greeting',function () {        return{            restrict:'AE',            scope:{                greet:'&'            },            template:'
'+                'Greeting
'        }    })复制代码

AG有60种以上的自带指令，具体的官网开发文档都有。

form指令： 可以进行嵌套。 拓展了自动校验，防止重复提交等功能。 对input元素的type进行了扩展，提供以下10中类型： text、number、url、email、radio、checkBox、hidden、button、submit、reset 为表单内置了4种css样式： ng-valid、ng-invalid、ng-pritine、ng-dirty 内置校验器：require、minlength，maxlength

    
    
        
             
             
         
    
复制代码