一、引用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，即以屬性的形式來進行聲明。
可選值如下：
replace[bool]
replace是一個可選參數，如果設置了這個參數，值必須為true，因為默認值為false。默認值意味著模板會被當作子元素插入到調用此指令的元素內部,
例如上面的示例默認值情況下，生成的html代碼如下：
<my-directive value="http://www.baidu.com" text="百度"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度</a></my-directive>
如果設置replace=true
<a 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 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，也就是當做屬性，
然后如果一個指令直接返回一個函數的時候，其實返回的一個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 my-current-time="format"></span><input ng-model="format">my-current-time="format"對應，html里面用破折號連起來，指令就是駝峰樣子的myCurrentTime（首字母小寫）
return function(scope, element, attrs) {
scope.$watch(attrs.myCurrentTime, function(value) {
updateTime()函數直接寫elem.text的效果。總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
