angular中的自定义指令

除了 AngularJS 内置的指令外,我们还可以创建自定义指令。

你可以使用.directive函数来添加自定义的指令。

要调用自定义指令,HTML 元素上需要添加自定义指令名。

使用驼峰法来命名一个指令,runoobDirective, 但在使用它时需要以-分割,runoob-directive:

eg:

<body ng-app = "myapp">

    <my-directive></my-directive>

    <script>

        let app = angular.module("myapp",[]);

        app.directive("myDirective",function(){

              return {

                        template:"<h3>自定义指令</h3>"

              }

        });

    </script>

当然,除了通过元素名的方式来调用指令,还可以通过以下方式来调用:

eg:

1.元素名:<my-directive></my-directive>

2.属性:<div my-directive></div>

3.类名:<div class="my-directive"></div>

4.注释:<!-- directive: my-directive -->

你也可以限制你的指令只能通过特定的方式来调用,通过添加restrict属性,并设置只值为“A”,来设置指令只能通过属性的方式来调用:

eg:

let app = angular.module("myApp", []);

app.directive("myDirective",function() {

        return{

                restrict :"A",

               template :"自定义指令"

         };

});

1.restrict值可以是以下几种:

         E:作为元素名使用

         C:作为类名使用

         M:作为注释使用

         A:作为属性使用

2.template和templateUrl

同一个指令中只能templatetemplateUrl只能选其一。

template为模板内容。即你要在指令所在的容器中插入的html代码。

template属性接收一个字符串,类似这样:

template: '我是指令生成的内容';

templateUrl为从指定地址获取模板内容。即你要在指令所在的容器中插入的一个.html文件。

有了templateUrl我们就可以将想实现的内容写成一个单独的html模版,在需要的地方插入,使用起来会很舒服。

这里的templateUrl类似于JSP中的include,angular也有一个ng-include指令。

3.replace和transclude

replace:是否用模板替换当前元素。true:将指令标签替换成temple中定义的内容,页面上不会再有标签;false:则append(追加)在当前元素上,即模板的内容包在标签内部。默认false。

transculde:是否使用ng-transculde来包含html中指令包含的所有内容,接受两个参数true/false。

eg: replace

js:

let app = angular.module("app",[]);

app.directive("hello",function() {

      let option ={

           restrict:"AECM",

           template:"hello , directive",

           replace:true  //这里replace为true,所以原来的内容会被template代替

       };

       return option;

});

html:

<body>

    <hello>我是原来的内容</hello>

    ===>变成<h3>hello, directive</h3>

    如果replace为false ===>

    <hello><h3>hello,directive</h3></hello>

</body>

eg: transclude

js:

let app = angular.module("app", []);

app.directive("hello",function() {

       let option ={

              restrict:"AECM",

              template:"hello,directive",

              transculde:true//这里transculde为true,所以原来的内容会被放在有ng-transclude属性的标签内

         };

         return  option;

});

html:

<body>

         <hello>我是原来的内容</hello>===>

         变成<hello><h3>hello,directive</h3><span ng-transclude>我是原来的内容</span></hello>

</body>

4.指令中的scope

directive默认能共享父 scope中定义的属性,例如在模版中直接使用父 scope 中的对象和属性。通常使用这种直接共享的方式可以实现一些简单的 directive 功能。

但是,当你要创建一个可以重复使用的directive的时候,就不能依赖于父scope了,因为在不同的地方使用directive对应的父scope不一样。

所以你需要一个隔离的scope,我们可以向下面这样来定义我们的scope。

eg:

module1.directive("testDirective", function () {

        return {

                 scope: {

                           value: '提莫队长正在待命!'

                  },

                  template: 'Say:{{value}}'

        }

});

这样就很方便的将我们directive的上下文scope给定义出来了,但是,如果我想将父scope中的属性传递给directive的scope怎么办呢?

directive 在使用隔离 scope 的时候,提供了三种方法同隔离之外的地方交互:

1.@ 绑定一个局部 scope 属性到当前 dom 节点的属性值。结果总是一个字符串,因为 dom 属性是字符串。

2.& 提供一种方式执行一个表达式在父 scope 的上下文中。如果没有指定 attr 名称,则属性名称为相同的本地名称。

3.= 通过 directive 的 attr 属性的值在局部 scope 的属性和父 scope 属性名之间建立双向绑定。

以上三种方式都要在directive的attr属性中进行赋值。上面的话理解起来可能会比较困难,简单来说就是:

1.@:只能绑定字符串,所以一些简单的继承父scope的属性使用@

2.=: 需要实现双向数据绑定的时候使用=

3.&: 传递来自父$scope中的函数稍后调用

未完,待续。。。。。。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容