码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-03-30 22:44:39      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:成功   div   连接   不同   代码注释   样式   双向   cti   相对   

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

  

 

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

标签:成功   div   连接   不同   代码注释   样式   双向   cti   相对   

原文地址:http://www.cnblogs.com/suzhen-2012/p/6648863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!