学习AngularJs ：Directive 指令⽤法（完整版）
这是我看过的最完整易懂的directive教程。
AngularJs 的指令定义⼤致如下
Directive 可以放置于元素名、属性、class 、注释中。下⾯是引⽤myDir 这个directive 的等价⽅式。（但很多directive 都限制为“属性”的使⽤⽅式）
如下⼀个实例 ：
结果：下⾯是⼀个directive 的详细版[html]
01. dule("app",[]).directive("directiveName",function(){ 02. return{ 03. //通过设置项来定义 04. }; 05. }) [html]
01.
<span <span style ="font-family: Arial, Helvetica, sans-serif;">directive-name </span><span style ="font-family: Arial, Helvetica, sans-serif;">="exp"></span>//属性</span> 02. 03. <span class ="<spa
n >directive-name </span>: exp;"></span>//class 04. 05.
<<span style ="font-family: Arial, Helvetica, sans-serif;">directive-name </span>></<span style ="font-family: Arial, Helvetica, sans-serif;">directive-name </span>>//元素 06. 07. <!-- directive: <span >directive-name </span><span >exp -->//注释</span> [html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp"> 03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <hello-world></hello-world> 10. </body> 11. <script type ="text/javascript"> 12. var app = angular .module('myApp', []); 13. app.directive('helloWorld', function() { 14. return { 15. restrict: 'E', 16. template: '<div>Hi 我是林炳⽂~~~</div>', 17. replace: true 18. }; 19. }); 20. </script> 21.
</html>
[html]
01. var myModule = angular .module(...); 02. 03. myModule.directive('directiveName', function factory(injectables) { 04. 05. var directiveDefinitionObject = { 06. 07. priority: 0, 08. 09. template: '<div></div>', 10.
可 以看到它有8个内容
（字符串）可选参数，指明指令在DOM ⾥⾯以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A ；当然也可以两个⼀起⽤，⽐如EA.表⽰即可以是元素也可以是属性。
⼀般情况下E/A/C ⽤得⽐较多。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM 上有多个指令，则优先级⾼的先执⾏；
（布尔型），可选参数，可以被设置为true 或false ，若设置为true ，则优先级低于此指令的其他指令则⽆效，不会被调⽤(优先级相同的还是会执⾏)
（1）⼀段HTML ⽂本11. templateUrl: 'directive.html', 12. 13. replace: false, 14. 15. transclude: false, 16. 17. restrict: 'A', 18. 19. scope: false, 20. 21. compile: function compile(tElement, tAttrs, transclude) { 22. 23. return { 24. 25. pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 26. 27. post: function postLink(scope, iElement, iAttrs, controller) { ... } 28. 29. } 30. 31. }, 32. 33. link: function postLink(scope, iElement, iAttrs) { ... } 34. 35. }; 36. 37. return directiveDefinitionObject; 38. 39. });
[html]
01. E(元素)：<directiveName></directiveName> 02. A(属性)：<div directiveName ='expression'></div> 03. C(类)： <div class ='directiveName'></div> 04. M(注释)：<--directive:directiveName expression--> [html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp"> 03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <hello-world></hello-world> 10. </body> 11. <script type ="text/javascript"> 12. var app = angular .module('myApp', []); 13. app.dir
ective('helloWorld', function() { 14. return { 15. restrict: 'E', 16. template: '<div><h1>Hi 我是林炳⽂~~~</h1></div>', 17. replace: true 18. }; 19. });
（2）⼀个函数，可接受两个参数tElement 和tAttrs
其中tElement 是指使⽤此指令的元素，⽽tAttrs 则实例的属性，它是⼀个由元素上所有的属性组成的集合（对象）形如：
其中title 就是tattrs 上的属性
下⾯让我们看看template 是⼀个函数时候的情况
结果：可以看到指令中还⽤到了hello-world2中的标签中的 title 字段
（1）⼀个代表HTML ⽂件路径的字符串
（2）⼀个函数，可接受两个参数tElement 和tAttrs （⼤致同上）
注意：在本地开发时候，需要运⾏⼀个服务器，不然使⽤templateUrl 会报错 Cross Origin Request Sc
ript （CORS ）错误。由于加载html 模板是通过异步加载的，若加载⼤量的模板会拖慢⽹站的速度，这⾥有个技巧，就是先缓存模板
你可以再你的index 页⾯加载好的，将下列代码作为你页⾯的⼀部分包含在⾥⾯。
这⾥的id 属性就是被设置在templateUrl 上⽤的。20. </script> 21. </html>
[html]
01. <hello-world2 title = '我是第⼆个directive'></hello-world2> [html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp"> 03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <hello-world></hello-world> 10. <hello-world2 title = '我是第⼆个directive'></hello-world2> 11. </body> 12. <script type ="text/javascript"> 13. var app = angular .module('myApp', []); 14. app.directive('helloWorld', function() { 15. return { 16. restrict: 'E', 17. template: '<div><h1>Hi 我是林炳⽂~~~</h1></div>', 18. replace: true 19. }; 20. }); 21. app.directive("helloWorld2",function(){ 22. return{ 23. restrict:'EAC', 24. template: function(tElement,tAttrs){ 25.
var _html = ''; 26. _html += '<div>' +'hello '+tAttrs.title+'</div>'; 27. return _html; 28. } 29. }; 30. }); 31. </script> 32.
</html>
[html]
01. <script type ='text/ng-template' id ='hello.html'> 02. <div><h1>Hi 我是林炳⽂~~~</h1></div> 03. </script>
[html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp">
输出结果：
另⼀种办法缓存是:angular和angularjs
使⽤实例如下：
结果：
其实第⼀种⽅法还好⼀些，写起来会⽐较快，笔者就得最多的也是第⼀种写法，直接包在scprit 当中
（布尔值），默认值为false ，设置为true 时候，我们再来看看下⾯的例⼦（对⽐下在template 时候举的例⼦）
replace 为true 时，hello-world 这个标签不在了，反之，则存在。03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <hello-world></hello-world> 10. </body> 11. <script type ="text/javascript"> 12. var app = angular .module('myApp', []); 13. app.directive('helloWorld', function() { 14. return { 15. restrict: 'E', 16. templateUrl: 'hello.html', 17. replace: true 18. }; 19. }); 20. </script> 21. <script type ='text/ng-template' id ='hello.html'> 22. <div><h1>Hi 我是林炳⽂~~~</h1></div> 23. </script> 24. </html>
[html]
01. app.run(["$templateCache", function($templateCache) { 02. $templateCache.put("hello.html", 03. "<div><h1>Hi 我是林炳⽂~~~</h1></div>"); 04. }]); [html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp"> 03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <hello-world></hello-world> 10. </body> 11. <script type ="text/javascript"> 12. var app = angular .module('myApp', []); 13. app.directive('helloWorld', function() { 14. return { 15. restrict: 'E', 16. templateUrl: 'hello.html', 17. replace: true 18. }; 19. }); 20. app.run(["$templateCache", function($templateCache) { 21. $templateCache.put("hello.html", 22. "<div><h1>Hi 我是林炳⽂~~~</h1></div>"); 23. }]); 24. </script> 25. </html>
7.scope
（1）默认值false 。表⽰继承⽗作⽤域;
（2）true 。表⽰继承⽗作⽤域，并创建⾃⼰的作⽤域（⼦作⽤域）;
（3）{}。表⽰创建⼀个全新的隔离作⽤域；
7.1⾸先我们先来了解下scope 的继承机制。我们⽤ng-controller 这个指令举例，
接下来我们通过⼀个简单明了的例⼦来说明scope 取值不同的差别：
scope:false
scope:true
scope:{}
当为false 时候，⼉⼦继承⽗亲的值，改变⽗亲的值，⼉⼦的值也随之变化，反之亦如此。（继承不隔离）
当为true 时候，⼉⼦继承⽗亲的值，改变⽗亲的值，⼉⼦的值随之变化，但是改变⼉⼦的值，⽗亲的值不变。（继承隔离）
当为{}时候，没有继承⽗亲的值，所以⼉⼦的值为空，改变任何⼀⽅的值均不能影响另⼀⽅的值。（不继承隔离）
tip ：当你想要创建⼀个可重⽤的组件时隔离作⽤域是⼀个很好的选择，通过隔离作⽤域我们确保指令是‘独⽴’的，并可以轻松地插⼊到任何HTML app 中，并且这种做法防⽌了⽗作⽤域被污染；
7.2隔离作⽤域可以通过绑定策略来访问⽗作⽤域的属性。directive 在使⽤隔离 scope 的时候，提供了三种⽅法同隔离之外的地⽅交互。这三种分别是@ 绑定⼀个局部 scope 属性到当前 dom 节点的属性
值。结果总是⼀个字符串，因为 dom 属性是字符串。& 提供⼀种⽅式执⾏⼀个表达式在⽗ scope 的上下⽂中。如果没有指定 attr 名称，则属性名称为相同的本地名称。
= 通过 directive 的 attr 属性的值在局部 scope 的属性和⽗ scope 属性名之间建⽴双向绑定。
@ 局部 scope 属性
@ ⽅式局部属性⽤来访问 directive 外部环境定义的字符串值，主要是通过 directive 所在的标签属性绑定外部字符串值。这种绑定是单向的，即⽗ scope 的绑定变化，directive 中的 scope 的属性会同步变化，⽽隔离 scope 中的绑定变化，⽗ scope 是不知道的。
如下⽰例：directive 声明未隔离 scope 类型，并且使⽤@绑定 name 属性，在 directive 中使⽤ name 属性绑定⽗ scope 中的属性。当改变⽗ scope 中属性的值的时候，directive 会同步更新值，当改变 directive 的 scope 的属性值时，⽗ scope ⽆法同步更新值。js 代码：[html]
01. <!DOCTYPE html > 02. <html lang ="zh" ng-app ="myApp"> 03. <head> 04. <meta charset ="UTF-8"> 05. <title>AngularJS ⼊门学习</title> 06. <script type ="text/javascript" src ="./1.5.3/angular.min.js"></script> 07. </head> 08. <body> 09. <div ng-controller ='MainController'> 10. ⽗亲:{{name}}<input ng-model ="name" /> 11. <div my-directive ></
div> 12. </div> 13. </body> 14. <script type ="text/javascript"> 15. var app = angular .module('myApp', []); 16. ller('MainController', function ($scope) { 17. $scope.name = '林炳⽂'; 18. }); 19. app.directive('myDirective', function () { 20. return { 21. restrict: 'EA', 22. scope:false, 23. template: '<div>⼉⼦:{{ name }}<input ng-model ="name"/></div>' 24. }; 25. }); 26. </script> 27. </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论