angular中的自定义指令

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

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

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

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

eg:

   

   

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

eg:

1.元素名:

2.属性:

3.类名:

4.注释:

你也可以限制你的指令只能通过特定的方式来调用,通过添加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:

    我是原来的内容

    ===>变成

hello, directive

    如果replace为false ===>

   

hello,directive

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:

         我是原来的内容===>

         变成

hello,directive

我是原来的内容

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中的函数稍后调用

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

你可能感兴趣的:(angular中的自定义指令)