美文网首页
angularJS自定义指令

angularJS自定义指令

作者: fengpang | 来源:发表于2018-02-07 11:15 被阅读0次

    这两天被调到这边来做一个ng1.4的项目,看了下项目写了挺多的自定义指令,于是再去尝试理解一波之前没理解清楚的自定义指令,发现这次看的时候比之前看的时候感觉清晰好理解了一些,写个东西给自己捋一捋,不免到时候忘记了。

    首先定义一个指令的方法:

    angular.module().directive('name',function(){})这样的方式

    然后是里面的参数:

    restrict表示使用方式,replace表示是否显示自定义指令的标签,还有一些比较好理解的属性,然后今天这边主要讲的就是scope和controller,这两个东西我自己之前看的时候就感觉这个地方没懂,昨天看发现好像比之前清晰了一些。

    我感觉可以把指令当成一个小组件,它有自己的作用域,自己的函数,以及自己的控制器,然后scope的话可以当做是这个小组件跟外界沟通的接口,可以通过它去定义有哪几个变量可以跟外面交流,定义的方式就像scope

    =表示把这个变量跟外面的值双向绑定,里面可以改变外面,外面也可以改变里面。然后传值时候的写法:

    直接写变量名,不带插值符号

    @符号表示单向的传值,外面向里面传,里面不能改变外面的值,但是外面可以改变里面的值,传值的写法:

    带插值符号

    然后controller的话我感觉就跟别的控制器没什么区别,只不过这个作用域限制在了这个指令里面。

    然后是link函数:

    接收三个参数

    scope当前作用域,elem当前元素,attr,当前元素的属性。然后就可以通过这些东西来操作dom。

    相关文章

      网友评论

          本文标题:angularJS自定义指令

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