angular的自定义指令---详解
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内所控制到方法,数据等也会填充到指令模板的位置,从而才形成功能强大的指令