一个Demo就懂的Angular之directive 

 1 <body>
 2         <div ng-controller="myCtrl">
 3               <hello-word></hello-word>
 4         </div>
 5 
 6         <script type="text/javascript">
 7             angular.module('app',[])
 8             .directive('hello-word',function($document){
 9                 return {
10                     /***
11                         'E':<hello-word></hello-word> 
12                         'A': <div hello-word ></div>
13                         'C': <div class="hello-word: exp;"></div> Class 类名
14                         'M': <!-- directive: hello-word exp --> Comment 注释
15                     */
16                     restrict: 'E',
17                     // templateUrl: 代表一个路径下的html片段
18                     template: '<div>hello word!!!</div>',
19                     //替换掉原标签
20                     replace: true,
21                     /**
22                         对特定的元素注册事件。需要用到scope参数来实现dom元素的一些行为
23                         function link(scope, element, attrs, controller) { ... }
24                         在link阶段要执行的函数，这个属性只有当compile属性没有设置时才生效
25                         常用参数为scope，element和attrs，分别是当前元素所在的scope，dom元素和元素上的属性们，其它的以后细说
26                         directive基本上都会有此函数，可以注册事件，并与scope相绑
27 
28                     */
29                     link: function(scope, element, attrs){
30                         angular.element(element).bind('click',function(){
31                             alert('hello word!!!!');
32                         })
33                     },
34                     /**
35                         想在dom渲染前对它进行变形，并且不需要scope参数
36                         想在所有相同directive里共享某些方法，这时应该定义在compile里，性能会比较好
37                         返回值就是link的function，这时就是共同使用的时候
38                     */
39                     compile: function(){
40 
41                     }
42                 }
43             })
44             .controller('myCtrl',function($scope,$location){
45                 
46             });
47       </script>
48 </body>

 

posted @ 2016-08-23 18:55  会飞的鱼儿游  阅读(221)  评论(0)    收藏  举报