angular的自定义指令---详解

Posted 2020-09-07

1.angualr指令

　　在angualr自己里面有许多丰富的指令，但都是平时所常见的，但对于自己所需要的可能有所欠缺，所以自己可能会摒弃原声指令，自己封装更为健壮灵活的指令；

　其实angular里面的指令也是基于下面所用到的步骤来创建的，只不过他都添加到了全局中，所以可以直接使用；

2.创建自定义指令

　　首先创建模块app,再使用app的服务directive方法，

　　创建指令内容第一个参数自定义的名字，第二个参数是自定义参数属性对象，该对象包括的属性基本在代码注释解释清楚；

　　

　　　　// a.创建模块
        var app=angular.module(‘myApp‘,[]);
        　　// b.创建自定义指令
        　　// 第一个参数：指令的名字
        app.directive(‘myZhiling‘,[function(){
            var obj={
              　　restrict:‘E‘,// A:attribue属性,E:element元素标签形式书，C:class以样式名的形式书写。M:comment注释，以注释的形式来书写
               　　//template:  ‘<ul><li>我叫小明</li></ul>‘,
              　　templateUrl:‘./view.html‘,  //指向一个文件，最终angualr会请求这个文件，把里面的
               　　//replace:true,//需要提供一个布尔值
              　　transclude:true,//需要提供一个布尔值
               　 scope:{//获取自定义指令所在元素的属性值
                  　　suibian:‘@term‘,//suibian这个属性会拿到自定义标签指令中属性名为term的属性值,@符号后面跟上属性名，@只能是指令内传过来的值。
                     obj:‘=grade‘,//=可以跟父控制器相互改变，双向绑定
                     method:‘&‘//这是简写方式，angualr会寻找属性名为age的属性，并拿到它的值，父控制器内的方法
                　　},
　　　　　　　　　　link:function(scope,element,attributes){
　　　　　　　　　　　　//相当于指令模板的控制器！
　　　　　　　　　　　　//可以接受scope里面的属性对象，然后再自己的控制器内处理，作用于指令的模板中，
　　　　　　　　　　 },
　　　　　　　　　　controller:function(){
　　　　　　　　　　}


            };
            return obj;
        }]);

　　

规则说明：

　　在scope里面的属性，即是自定内传进来的参数，可以是一个对象或是简单的字符串内容，然后就会自动填充到我们指令所在模板的标签位置；

　　指令的模板就是tamplateUrl所指向的文件内的内容；

　　link,controller本质的内容都是相对于指令所用到位置所在控制器的子控制器；

　　指令名驼峰命名，使用时要转变成‘-’连接

　　scope内的多种不同符号的意义；

3.使用介绍：

在自己的项目中使用自己的指令，直接引入即可；

<my-zhiling obj="{name:‘张三‘}" term="不随便">找小明</my-zhiling>

　　指令在接收到值或在link、controller内所控制到方法，数据等也会填充到指令模板的位置，从而才形成功能强大的指令