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>