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>
时间： 2024-10-13 00:58:54