Angular指令相关

1、link函数相关的要点：

     <div ng-controller="MainCtrl">
        <input type="text" ng-model="color" placeholder="Enter a color" />
        <hello-word></hello-word>
     </div>

    app.directive('helloWord',function(){
        return {
            restrict:'AE',
            replace:true,
            template:'<p style="background-color:{{color}}">{{color}}</p>',
            link:function(scope,ele,attr){
                ele.bind('click',function(){
                    ele.css('background-color','white');
                    scope.$apply(function(){
                        scope.color='white';
                    });
                });
                ele.bind('mouseover',function(){
                    ele.css('cursor','pointer');
                });
            }
        }
    })

    说明：
        link函数有三个参数scope，ele，attr
        scope是当前指令的父作用域，即MainCtrl的作用域
        ele是当前指令<hello-word></hello-word>
        attr是当前指令<hello-word></hello-word>上绑定的属性，可以在link函数中用attr.attributeName调用

2、指令的作用域如何改变？

    ①scope:true;
        说明：一个完全继承了父作用域的子作用域
    ②scope:{};
        说明：一个全新的隔离的独立的作用域
    应用：当定义一个可重用的组件时、防止父作用域被污染时

3、如果我想隔离父作用域还要能够访问父作用域的变量怎么办呢？

    模板如下：
    scope:{
        attrName:'value'
    }
    那么attrName是什么呢？当然是组件中要使用的属性名了呗！
    我们首先来看看绑定策略：
        @：传递一个字符串作为属性的值
        =：使用父作用域的属性作为属性的值
        &：使用父作用域的函数作为属性的值

4、如果指令的模板太长了怎么办呢？

    将模板单独写在.html文件中，使用templateUrl:'./name.html'引入即可
    害处：这样做就浪费了一个http请求，如果指令比较多呢？
    可以使用以下模板：
        <script type="text/ng-template" id="templateName.html">
            //这里是模板内容
        </script>
    然后将所有的模板放在一个.html文件中，一次性加载，然后根据id来用

5、指令与指令之间要怎么样通信呢？link函数中的controller参数怎么用呢？

    其实指令之间的通信就像一个模块暴露对外的接口，另一个模块应用它一样
    主要使用controller参数和require参数
    controller参数用于定义指令对外提供的接口，写法：
        controller:function($scope,$element,$attrs,$transclude){

        }
    其中参数都可以通过依赖注入传进来
    require参数用来指明指令需要依赖的其他指令，值是一个字符串，即指令的名字，写法：
        require:'^directiveName';
    前缀^表示从当前指令的父节点开始查找要引入的指令
        ？表示所需的controller没找到时，不要抛出异常
    写法：

        app.directive('expander',function(){
            return {
                restrict:'E',
                templateUrl:'expanderTemplate.url',
                replace:true,
                require:'^accordion',
                link:function(scope,element,attrs,accordionCtrl){
                    //.....
                }
            }
        })

    其中require引入了要使用的指令accordion，link函数的参数accordionCtrl指的就是它相应的控制器。