自定义指令-directive (转)

所以最终页面显示的是“纯净水”，主要的流程就是：

　　a.在指令中，通过@实现指令与HTML页面元素关联;

　　b.在控制器中又实现了与页面的联系;

　　c.从而借助HTML页面建立起控制器与指令的联系，也是一种通讯方式。

具体见下图：

2、指令作用域中的=

作用是与父scope中的属性进行双向绑定。

Js代码：

这里=的手段类似，通过页面设置两个输入框，分别代表指令和控制器的作用域，在JS代码实现了双向绑定，做到了控制器与指令在各自作用域内能够影响对方，也就是双向通信，具体思路与@类似，不赘述，上图：

3、指令作用域中的&

主要作用是传递一个来自父scope的函数，稍后调用。

js代码

从页面可以看出，这里定义了一个标签，并在其中定义了属性名greet，与上面的@以及=不同的是，属性名后面是一个方法，所以，这里的&主要用于在Controller和directive之间传递函数，实现两者之间的函数通信，在JS中，将前台的greeting标签替换为template中的内容，一个输入框加上一个按钮，按钮上绑定了greet函数，与前台页面的greet相呼应，而前台的greet函数在控制器中有定义，所以指令中也是调用的控制器中的greet函数。执行结果如下：

（1）初始界面

（2）在第一个文本框填值

(3)在第二个文本框填值

（4）在第三个文本框中填值

转自：http://www.cnblogs.com/bigdataZJ/p/AngularJS1.html