AngularJs 指令directive之controller，link，compile

一时失言乱红尘 2022-07-17 00:45 139阅读 0赞

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用\[命名空间-指令名称\]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带的指令重名。另外一个需知道的地方，指令命名时用驼峰规则，使用时用-分割各单词。如：定义myDirective，使用时 像这样：<my-directive>。

这里列出directive的合法命名：

*  ng:bind
 *  ng-bind
 *  ng\_bind
 *  x-ng-bind
 *  data-ng-bind

我是教师，在新建试题输入分数的时候应该只能输入数字才对，输入其他内容是不合法的，而且我希望这个分数是1~10之间的数字。能否只在输入框上加一个属性.我们定义一个叫做fractionNum的指令如下

Java代码   ![收藏代码][icon_star.png]

1.  app.directive('fractionNum',function()\{  
2.      **return** \{  
3.          link : function(scope, elements, attrs, controller)\{  
4.              elements\[0\].onkeyup = function()\{  
5.                  **if**(isNaN(**this**.value) || **this**.value<1 || **this**.value>10)\{  
6.                      **this**.style.borderColor = 'red';  
7.                  \}  
8.                  **else**\{  
9.                      **this**.style.borderColor = '';  
10.                 \}  
11.             \};  
12.         \}  
13.     \};  
14. \});

link的值是一个函数，用来定义指令的行为。从传入的参数中可以获取到当前元素，我们便可以拿当前元素开刀了。我在此处监听当前元素的keyup事件，获取元素的值，如果不是1~10之间的数字，则把输入框的边框颜色变为红色。这下这个指令就可以工作了。定义好的指令就可以在模板中使用了，使用方法如下：

Java代码   ![收藏代码][icon_star.png]

1.  分数:<input type="text" ng-model="question.fraction" fraction-num /><br />

**controller，link，compile有什么不同**

Java代码   ![收藏代码][icon_star.png]

1.  //directives.js增加exampleDirective  
2.  phonecatDirectives.directive('exampleDirective', function() \{  
3.      **return** \{  
4.          restrict: 'E',  
5.          template: '<p>Hello \{ \{number\}\}!</p>',  
6.          controller: function($scope, $element)\{  
7.              $scope.number = $scope.number + "22222 ";  
8.          \},  
9.          //controllerAs:'myController',  
10.         link: function(scope, el, attr) \{  
11.             scope.number = scope.number + "33333 ";  
12.         \},  
13.         compile: function(element, attributes) \{  
14.             **return** \{  
15.                 pre: function preLink(scope, element, attributes) \{  
16.                     scope.number = scope.number + "44444 ";  
17.                 \},  
18.                 post: function postLink(scope, element, attributes) \{  
19.                     scope.number = scope.number + "55555 ";  
20.                 \}  
21.             \};  
22.         \}  
23.     \}  
24. \});  
25.   
26. //controller.js添加  
27. dtControllers.controller('directive2',\['$scope',  
28.     function($scope) \{  
29.         $scope.number = '1111 ';  
30.     \}  
31. \]);  
32.   
33. //html  
34. <body ng-app="phonecatApp">  
35.     <div ng-controller="directive2">  
36.         <example-directive></example-directive>  
37.     </div>  
38. </body>

** **运行结果：

Java代码   ![收藏代码][icon_star.png]

1.  Hello 1111 22222 44444 55555 !

**由结果可以看出来，controller先运行，compile后运行，link不运行(link就是compile中的postLink)。**将上例中的compile注释掉运行结果：

Java代码   ![收藏代码][icon_star.png]

1.  Hello 1111 22222 33333 !

**由结果可以看出来，controller先运行，link后运行，link和compile不兼容。compile改变dom,link事件的触发和绑定**

源引：http://hudeyong926.iteye.com/blog/2073488

[icon_star.png]: /images/20220717/2de055b9747340be87e8a9b42435a0e2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关《AngularJS》5个实例详解Directive（指令）机制

[原文链接点击此处][Link 1] 本文整理并扩展了《AngularJS》这本书第六章里面的内容，此书近期即将由电子工业出版社出版，敬请期待口令：Ang

冷不防/ 2022年08月20日 14:08/ 0 赞/ 192 阅读

相关 angularJS系列之指令directive应用实例

代码结构 ![这里写图片描述][20160708111738987] html页面代码 <!DOCTYPE html> <html ng-app="dem

红太狼/ 2022年07月20日 15:14/ 0 赞/ 139 阅读

相关 AngularJs 指令directive之controller，link，compile

关于自定义指令的命名，你可以随便怎么起名字都行，官方是推荐用\[命名空间-指令名称\]这样的方式，像ng-controller。不过你可千万不要用 ng-前缀了，防止与系统自带

一时失言乱红尘/ 2022年07月17日 00:45/ 0 赞/ 140 阅读

相关 AngularJS内幕详解之 Directive

如果这个图表看起来非常的费解，那么这篇文章很适合你。 [![Angular][]][Angular] (Image credit: [Angular JS document

小咪咪/ 2022年07月17日 00:45/ 0 赞/ 144 阅读

相关《AngularJS》5个实例详解Directive（指令）机制

1.一点小说明指令的作用：实现语义化标签我们常用的HTML标签是这样的： <div> <span>一点点内容</span

r囧r小猫/ 2022年07月17日 00:45/ 0 赞/ 131 阅读

相关 AngularJ中的Directive指令

Directive（指令）是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以

比眉伴天荒/ 2022年07月13日 03:26/ 0 赞/ 142 阅读

相关 angularjs速成学习个人理解_7指令Directives

AngularJS 让我们可以继承HTML带有新的属性，这个功能叫做指令Directives AngularJS 有一组内置的指令，可以为您的应用程序提供功能。 Ang

男娘i/ 2022年06月07日 10:47/ 0 赞/ 137 阅读

相关 AngularJS 学习笔记 02：指令（directive）

自定义指令内置指令 ng-app（指定根元素） ng-controller（定义控制器） ng-include

╰+哭是因爲堅強的太久メ/ 2022年05月26日 05:10/ 0 赞/ 179 阅读

相关 AngularJS - 创建自定义的指令（directive）

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令

た入场券/ 2022年05月16日 01:49/ 0 赞/ 229 阅读

相关 AngularJS内幕详解之Directive

　　在这系列的上一篇文章，我讨论了scope事件以及digest循环的行为。这一次，我将谈论指令。这篇文章包括独立的scope，内嵌，link函数，编译器，指令控制器等等。

谁借莪１个温暖的怀抱￠/ 2022年04月06日 10:58/ 0 赞/ 106 阅读