Angular的自定义指令以及实例

Angular的自定义指令以及实例

前面的文章介绍了很多angular自带的指令，下面我们看看如何使用directive自定义指令。

先看一个例子：

1：我们定义了一个my-hello的指令。

2：使用directive完善这个指令，返回一个对象。有三个值：

a) ：restrict共四个值：E：标签指令，C：class指令，M：注释指令，A：属性指令

如何使用 ？

b)：replace是否替换（M注释必须为true才能解析）看图：

c)：template内容，除此之外还有templateUrl，指定一个html模板文件。

下面再举个例子：

1：scope默认是false，为true表示独立作用域。

2：scope给予一个对象时，表示执行绑定策略，在template上调用这些数据。

a)：我们在DOM元素上my-id，我们使用@符号，表示解析普通字符串，说白了就是你写什麽就是什麽。

b)：使用=符号，表示解析数据。

c)：使用&符号，表示这绑定一个函数。

3：controller，表示绑定指令内部使用的数据。

好，下面来继续完善这个tab切换的例子！

完整代码：

link属性，表示当directive被angular编译后，执行该方法。这个方法接受三个参数，

a)：scope表示controller下面的数据。

b)：element表示当前的DOM元素。

c)：attr表示这个DOM元素上的自定义属性。

补充：

在实际的开发过程中我们往往需要嵌套各种组件和指令。下面来介绍directive中的transclude和require。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。