angularJS----directive

</div>

link属性：function(scope,attr,ctrl,linker){//code}

　　该属性可选。默认为空，link属性主要用于操作DOM元素和绑定事件。该函数接收5个参数（后面2个参数几乎用不到）

　　　　scope表示指令 所在的作用域（如果scope属性存在，则按照他的规则，若没有，scope表示父级scope）可以在scope下设置变量 如：scope.name='tom'

注意：不能在scope属性下设置变量。一般在link属性和controller属性下设置变量。

　　　　ele表示指令元素（注意：他是js对象，不是jq对象，他可以直接操作内置的一些‘jq’方法，很可能是在内部将ele先转为jq对象，再调用方法），可以直接操作ng内置的jq方法，也可以引入jq文件，直接用jq操作。

　　　　attr表示指令元素的属性集合（注意：attr是一个对象） attr是一个很强大的东西。强大就强大在它可以包含自己！一头雾水？？一脸懵逼？？ 试想一下，当指令以属性的形式表现时，调用ele.attr会把所有属性展现出来，包括指令。先看代码：

在chrome中显示：

　　能拿到他的自己又有什么用呢（提示：ng的双向绑定）我现在有个需求：我想通过指令让文字变任意颜色，用angular怎么弄？思路：1.考虑到ng双向绑定数据和attr的特性，2.可以设置ng-color指令，随便给他一个颜色 ng-color=‘red’,3.通过attr获取到属性值‘red’，4.然后用jq或者内置方法css（）设置样式给指令所在标签即可

　　具体实现：

?　　

　在chrome中显示：

　　　　现在，我想让div变什么颜色就变什么颜色。只要在ng-color（注意：ng-color不是ng内置指令）上绑定相应的‘颜色’即可。是不是感觉跟ng内置的指令很类似？ng内部指令估计就是这样实现的（以后研究一下源码）。

　　　　好了。巩固一下，我们来写一个跟ng-click一样的指令，我把它命名为 clicking?

　　在这里解释一下$apply：调用$apply会把内容添加到循环序列中，监听这个内容，一旦内容发生改变，就会更新数据（这个例子中，点击执行了show方法，被监控到了）

　　后面的2个参数，很少用到，就不展开讨论了。

　scope：false/true/{}

　　　　该属性可选，默认值是false。 ? scope属性是用来创建属于指令自己的作用域（称为‘隔离作用域’）

　　　　当为false时，创建的指令继承了父作用域的一切属性和方法，这也使得在指令的模板中我们可以使用这些属性和方法。

　　　　当为true时，指令新创建了一个作用域，只不过这个作用域是继承了我们的父作用域；我觉得可以这样理解，我们新创建的作用域是一个新的作用域，只不过在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。

　　　　当为{}时，指令创建了一个完全与父级作用域隔离的新的作用域?AngularJS最强的大的地方之一就是它可以构建组件，无论放在哪里都是可以使用的；之所以可以做到这些，不得不归功于指令的这个属性；当我们将scope设置为{}时，意味着我们创建的一个新的与父作用域隔离的新的作用域，这使我们在不知道外部环境的情况下，就可以正常工作，不依赖外部环境。

　　　　我们使用了隔离的作用域，不代表我们不可以使用父作用域的属性和方法。

　　　　 ? 我们可以通过向scope的{}中传入特殊的前缀标识符（即prefix），来进行数据的绑定。

　　　　　　@：@将本地作用域和DOM中的属性值绑定起来（且这个属性的值必须是父级作用域中的）什么意思呢？说的简单一点就是假设你在模板中有个双花括号表达式，然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来?具体实例如下：

　　具体来说，就是在指令所在的标签定义一个自定义属性，用来装$scope.name (大括号的形式。为什么是大括号？自己想。) 然后@自定义属性给scope选项就ok了。当然了，他是有简写方式的：如果写成name：‘@’。就表示自定义属性名为name（跟scope选项的name形同）

　　　　　　= ：这个符号是也是用来引用外部数据的。跟@的不同的是：@是针对字符串（准确来说是表达式expression）而用，但=是针对某个对象的引用；但就拿上边的例子而言，我们在html中，把Name这个字符串通过一对双花括号传递给for-name属性，但如果我们用了=，这里传入的Name就不应该是一个字符串，而是一个对象的引用。

　　　这2种方式都可以引用到$scope.name='jjk'

　　这例子并不是一目了然。再举几个例子：

　　　　1.对象数组的引用?

　　在chrome中显示：

结果就是，一个张三，一个李四。这个例子中，data是一个对象数组，里面包含了两个对象，所以，我们分别把两个对象传递给了case这个属性，case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字，那只要把html里case属性换成那个名字就可以了。

　　　　2.经典的双向输入框

　　　　　　创建两个双向绑定的输入框，最简单的实现方式就是：

　　　　　　　　　　<

?　　　　　　&：它的含义是：对父级作用域进行绑定，并将其中的属性包装成一个函数，注意，是属性，意即，任何类型的属性都会被包装成一个函数，比如一个单纯的字符串，或是一个对象数组，或是一个函数方法。

　　　　　　　如果是字符串、对象数组和无参的函数，那么可想而知，它们都会被包装成一个无参的函数，若是有参的函数方法则反之，并且我们需要为其传入一个对象。现在，分别针对有参和无参两种情况举例。

　　　　无参数的情况下：

?

　特别注意：　　　

　　　　1.指令的本地属性（即模板里花括号中的属性）需要从本地取值，所以使用了controller选项，而在controller选项中，两个无参方法分别返回了父级scope中的title字符串和contents对象数组。

　　　　2.在HTML中，我们把设置了get-title和get-content的属性值为title和contents，这实际上就完成了与父级scope的绑定，因为我们才可以从那儿取得实质的内容。

　　　　有参数的情况下：

　　这个例子中，通过模板中的ng-click触发了show函数并将一个叫做model的对象作为name参数传递了进去，而在html中，我们把show的属性值设为showName(name)。这其中的道理跟无参的例子是大同小异的。

　　为什么Angular要为我们提供这样一套绑定策略呢？就是因为它想让我们在为指令创建隔离作用域的同时，还能访问到父级中的属性，这就像，你在隔离作用域身上打了一个洞，然后用一条管道，把指令内部和外界的属性给连起来（绑定），并且一切的通信都只能通过这条管道来实行。

　　controller function($scope){//code}

　　　　该属性可选。可用于在指令中创建自己的作用域（可以注入$scope服务）创建的作用域是和link函数的scope是一样的?。controller和link很相似，但一般场景下都不要使用controller，只需要把逻辑写在link中就可以了；用controller的场景就是该指令（假设为a）会被其他指令（假设为b）require的时候，这样就会在b指令的link函数中传入这个controller（如果require多个的话，传入的是一个数组，数组中存放的是每一个require的指令对应的controller），目的很显然是为了指令间进行交流的。还有就是 ng会先执行controller，再执行link函数 而且会覆盖相同属性。

　　在chrome中显示：

　　关于directive的总结就先到这里了。细节以后慢慢补充

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　2017.04.14 ?19：23

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!