学习AngularJs:Directive指令用法（完整版）

本教程使用AngularJs版本：1.5.3

AngularJs GitHub: https://github.com/angular/angular.js/

AngularJs下载地址：https://angularjs.org/

摘要：Directive（指令）笔者认为是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：
1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。
2. 抽象一个自定义组件，在其他地方进行重用。

一、Directive的定义及其使用方法
AngularJs的指令定义大致如下

angular.module("app",[]).directive("directiveName",function(){ 
 return{ 
 //通过设置项来定义 
 }; 
}) 

Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。（但很多directive都限制为“属性”的使用方式）

lt;span lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;directive-namelt;/spangt;lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;="exp"gt;lt;/spangt;//属性lt;/spangt; 
 
lt;span class="lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;directive-namelt;/spangt;: exp;"gt;lt;/spangt;//class 
 
lt;lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;directive-namelt;/spangt;gt;lt;/lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;directive-namelt;/spangt;gt;//元素 
 
lt;!-- directive: lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;directive-name lt;/spangt;lt;span style="font-family: Arial, Helvetica, sans-serif;"gt;exp --gt;//注释lt;/spangt; 

如下一个实例 ：

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;bodygt; 
lt;hello-worldgt;lt;/hello-worldgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: 'lt;divgt;Hi 我是林炳文~~~lt;/divgt;', 
 replace: true 
 }; 
}); 
lt;/scriptgt; 
lt;/htmlgt; 

结果：

下面是一个directive的详细版

var myModule = angular.module(...); 
 
myModule.directive('directiveName', function factory(injectables) { 
 
 var directiveDefinitionObject = { 
 
 　　priority: 0, 
 
 　　template: 'lt;divgt;lt;/divgt;', 
 
 　　templateUrl: 'directive.html', 
 
 　　replace: false, 
 
 　　transclude: false, 
 
 　　restrict: 'A', 
 
 　　scope: false, 
 
 　　compile: function compile(tElement, tAttrs, transclude) { 
 
 　　　　return { 
 
 　　　　　　pre: function preLink(scope, iElement, iAttrs, controller) { ... }, 
 
 　　　　　　post: function postLink(scope, iElement, iAttrs, controller) { ... } 
 
　　　　} 
 
　　}, 
 
 　　link: function postLink(scope, iElement, iAttrs) { ... } 
 
}; 
 
 return directiveDefinitionObject; 
 
}); 

二、Directive指令内容解读
可 以看到它有8个内容
1.restrict
（字符串）可选参数，指明指令在DOM里面以什么形式被声明；取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；当然也可以两个一起用，比如EA.表示即可以是元素也可以是属性。
[html] view plain copy 在CODE上查看代码片派生到我的代码片
E(元素)：lt;directiveNamegt;lt;/directiveNamegt;nbsp;
A(属性)：lt;div directiveName='expression'gt;lt;/divgt;nbsp;
C(类)： lt;div class='directiveName'gt;lt;/divgt;nbsp;
M(注释)：lt;--directive:directiveName expression--gt;nbsp;
一般情况下E/A/C用得比较多。
2.priority
(数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行；

3.terminal
（布尔型），可选参数，可以被设置为true或false，若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)

4.template（字符串或者函数）可选参数，可以是：
（1）一段HTML文本

lt;!DOCTYPE htmlgt; 
lt;html lang="zh" ng-app="myApp"gt; 
lt;headgt; 
 lt;meta charset="UTF-8"gt; 
 lt;titlegt;AngularJS入门学习lt;/titlegt; 
 lt;script type="text/javascript" src="./1.5.3/angular.min.js"gt;lt;/scriptgt; 
lt;/headgt; 
lt;bodygt; 
lt;hello-worldgt;lt;/hello-worldgt; 
lt;/bodygt; 
lt;script type="text/javascript"gt; 
var app = angular.module('myApp', []); 
app.directive('helloWorld', function() { 
 return { 
 restrict: 'E', 
 template: 'lt;divgt;lt;h1gt;Hi 我是林炳文~~~lt;/h1gt;lt;/divgt;', 
 replace: true 
 }; 
}); 
lt;/scriptgt; 
lt;/htmlgt; 

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!