美文网首页
AngularJs中的指令-----directive

AngularJs中的指令-----directive

作者: 木槿惜年2013 | 来源:发表于2016-12-22 13:54 被阅读21次

一、指令的作用:
  用于封装DOM操作,扩展HTML标签及属性的能力-----为HTML添加新标签、新属性、新样式
二、自定义指令的三种用法(此处的cr是我自定义指令的名称)
  (1)当做标签:<cr></cr>
  (2)当做属性:<span cr></span> (但是严格的html5检查程序,会认为span没有cr属性会报错,此时只需要在cr前面加data-即可)
  (3)当做样式:<span class="cr"></span>

推荐:当做属性来使用

三、自定义指令对应的js代码

var mm=angular.module('myModule',[]);

mm.directive('cr',function(){
    //cr:指令的名称
    //function:用于定义该指令的作用
    //注:指令是一个对象(即:每一个指令都是一个对象),所以需要返回一个对象
    return {
        //E:element  A:attribute  C:class (注:这三个字母可以任意组合使用)
        restrict : 'E',//用于指定该指令适合的用法
        template : '<div>Hello World !</div>' //该指令实际对应的html内容,若内容较多,则可使用templateUrl:'xxx.html'
    }
});

相关文章

网友评论

      本文标题:AngularJs中的指令-----directive

      本文链接:https://www.haomeiwen.com/subject/zaocvttx.html