一、引用template
对于指令，可以把它简单的理解成在特定DOM元素上运行的函数，指令可以扩展这个元素的功能。
指令要生效，那么html头里面要
<html lang="en" ng-app="app">
制定ng-app的值和定义指令的module名字一致：
angular.module('app',[])
指令的完整参数：
angular.module('myApp', []).directive('myDirective', function() {
return {
restrict: String, priority: Number, terminal: Boolean, template: String or Template Function: function(tElement, tAttrs) {
...}
, templateUrl: String, replace: Boolean or String, scope: Boolean or Object, transclude: Boolean, controller: String or function(scope, element, attrs, transclude, otherInjectables) {
... }
, controllerAs: String, require: String, link: function(scope, iElement, iAttrs) {
... }
, compile: // 返回一个对象或连接函数，如下所示： function(tElement, tAttrs, transclude) {
return {
pre: function(scope, iElement, iAttrs, controller) {
... }
, post: function(scope, iElement, iAttrs, controller) {
... }
}
return function postLink(...) {
... }
}
}
;
}
);
指令可以使用的方式：
restrict[string]
restrict是一个可选的参数。用于指定该指令在DOM中以何种形式被声明。默认值是A，即以属性的形式来进行声明。
可选值如下：
- E（元素）<my-directive></my-directive>
- A（属性，默认值）<div my-directive="expression"></div>
- C（类名）<div class="my-directive:expression;"></div>
- M（注释）<--directive:my-directive expression-->
replace[bool]
replace是一个可选参数，如果设置了这个参数，值必须为true，因为默认值为false。默认值意味着模板会被当作子元素插入到调用此指令的元素内部,
例如上面的示例默认值情况下，生成的html代码如下：
<my-directive value="http://www.baidu.com" text="百度"><a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a></my-directive>
如果设置replace=true
<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" value="http://www.baidu.com" text="百度">百度</a>
据我观察，这种效果只有设置restrict="E"的情况下，才会表现出实际效果。
template[string or function]
template参数是可选的，必须被设置为以下两种形式之一：
一段HTML文本；
一个可以接受两个参数的函数，参数为tElement和tAttrs，并返回一个代表模板的字符串。tElement和tAttrs中的t代表template，是相对于instance的。
不管是返回html文本还是函数，都是最后替换一个html，和replace属性搭配使用的，先给出一个完整的index.heml directive.js，以这个为例子来说明：
<!doctype html><html lang="en" ng-app="app"><head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="angularjs/angular.js"></script> <script src="mydirective.js"></script></head><body> <my-directive></my-directive></body></html>
然后js：
angular.module('app',[]) .directive('myDirective', function () {
return {
restrict: 'E', template: '<a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a>' }
;
}
)
最后的运行效果以及firebug查看到的效果：
如果添加指令的replace属性为ture，那么就不会有这个directvie指令部分了：
上面就是差别。
再说说指令定义里面模板参数是函数的情况，我们改写html以及js：
<!doctype html><html lang="en" ng-app="app"><head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="angularjs/angular.js"></script> <script src="mydirective.js"></script></head><body> <my-directive value="http://www.baidu.com" text="百度"></my-directive></body></html>js文件：angular.module('app',[]) .directive('myDirective', function () {
return {
restrict: 'EAC', template: function (elem, attr) {
return "<a href='" + attr.value + "'>" + attr.text + "</a>";
}
}
;
}
)
指令定义的template是一个函数对象，返回一个html的字符串，那么他的elem和attr就是分别代表这个指令和他在index.html里面的属性：
attr.value和attr.text分别对应：
<my-directive value="http://www.baidu.com" text="百度"></my-directive>
里面的value和text。
不replace的情况：
二、指令当做属性
上面说过：
angular.module('myApp', []) .directive('myDirective', function() {
return {
restrict: String, 后面省略
指令restrict有四种用法，默认是A，也就是当做属性，
- E（元素）<my-directive></my-directive>
- A（属性，默认值）<div my-directive="expression"></div>
- C（类名）<div class="my-directive:expression;"></div>
- M（注释）<--directive:my-directive expression-->
然后如果一个指令直接返回一个函数的时候，其实返回的一个link函数，比如：
angular.module('time', []) .directive('xxx', function() {
return function(scope, element, attrs) {
这个是表示直接link。
当指令做属性的时候，有两重含义：
1.在一个html元素里面制定为属性
2.js定义的指令名。
看一个例子：
JS：
angular.module('time', []) .controller("Ctrl2", function($scope) {
$scope.format = 'M/d/yy h:mm:ss a';
}
) // Register the 'myCurrentTime' directive factory method. // We inject $timeout and dateFilter service since the factory method is DI. .directive('myCurrentTime', function($timeout, dateFilter) {
// return the directive link function. (compile function not needed) return function(scope, element, attrs) {
var format, // date format timeoutId;
// timeoutId, so that we can cancel the time updates // used to update the UI function updateTime() {
element.text(dateFilter(new Date(), format));
}
// watch the expression, and update the UI on change. scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
}
);
// schedule update in one second function updateLater() {
// save the timeoutId for canceling timeoutId = $timeout(function() {
updateTime();
// update DOM updateLater();
// schedule another update }
, 1000);
}
// listen on DOM destroy (removal) event, and cancel the next UI update // to prevent updating time ofter the DOM element was removed. element.bind('$destroy', function() {
$timeout.cancel(timeoutId);
}
);
updateLater();
// kick off the UI update process. }
}
);
然后index.html:
<!doctype html><html lang="en" ng-app="time"><head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script src="angularjs/angular.js"></script> <script src="mydirective.js"></script></head><body> <div ng-controller="Ctrl2"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div></body></html>
注意：ng-app="time"一定要指明是time。否则无法关联起来。
分析如下：
- 给span制定了一个属性，绑定到了scope里面的format
<span my-current-time="format"></span>- 定义了输入框，绑定了scope里面的format
<input ng-model="format">- 定义了controller -- Ctrl2， 然后引入了scope，定义了变量format
- 定义了指令myCurrentTime ， 然后就是和html里面的
my-current-time="format"对应，html里面用破折号连起来，指令就是驼峰样子的myCurrentTime（首字母小写） - link函数的三个参数，以及attrs的使用：
- return function(scope, element, attrs) {
scope.$watch(attrs.myCurrentTime, function(value) { - 可看到，myCurrentTime既是指令名字，然后在这个span元素里面又是属性名，他的值是format的真实值。
- 用firebug看到：
- 指令当成属性，不会有replace起作用的时候，不会被替换也不会插入，就是一个属性，后面的日期值，其实是
updateTime()函数直接写elem.text的效果。 - 此处指令当做属性的作用就是扩展当前元素的功能。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
