Angular指令相关

1、link函数相关的要点:

     
                      
    app.directive('helloWord',function(){
        return {
            restrict:'AE',
            replace:true,
            template:'

{{color}}

',             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是当前指令
        attr是当前指令上绑定的属性,可以在link函数中用attr.attributeName调用

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

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

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

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

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

    将模板单独写在.html文件中,使用templateUrl:'./name.html'引入即可
    害处:这样做就浪费了一个http请求,如果指令比较多呢?
    可以使用以下模板:
        
    然后将所有的模板放在一个.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指的就是它相应的控制器

你可能感兴趣的:(web前端,Angular)