詳解angular 中的自定義指令之詳解API
自定義屬性的四種類別
分為： 元素E，屬性A，注釋M，類C , 分別如下：
<my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
簡單創(chuàng)建一個指令
html結(jié)構(gòu)：
<div ng-controller="myCtrl"> <div my-customer></div> </div>
JavaScript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
template: 'Name: {{customer.name}} Address: {{customer.address}}'
};
});
輸出：
Name: Naomi Address: 1600 Amphitheatre
說明： 此處，myCtrl 中定義的 $scope.customer 屬性和屬性值都在指令中的模板使用了。同樣的，在指令return 對象中的 template 也可被替換成一路徑，在路徑html中書寫和template中同樣的代碼，使用這種方式，可以操作更多代碼。
templateUrl 函數(shù)式編程
html結(jié)構(gòu)：
<div ng-controller="myCtrl"> <div my-customer></div> </div>
javascript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.directive('myCustomer', function() {
return {
templateUrl: function(elem, attr) {
return 'customer-' + attr.type + '.html';
}
};
});
不同的templateUrl ①
Name: {{customer.name}}
不同的templateUrl ②
Address: {{customer.address}}
輸出結(jié)果：
Name: Naomi
Address: 1600 Amphitheatre
說明： templateUrl 的值可以是一個函數(shù)返回值，返回用于指令中的html模板的url。
隔離指令的作用域
① 通過不同的controller
html結(jié)構(gòu)：
<div ng-app="myApp">
<div ng-controller="myCtrl1">
<my-customer></my-customer>
</div>
<div ng-controller="myCtrl2">
<my-customer></my-customer>
</div>
</div>
javascript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl1', ['$scope', function($scope) {
$scope.customer = {
name: 'Naomi',
address: '1600 Amphitheatre'
};
}])
.controller('myCtrl2', ['$scope', function($scope) {
$scope.customer = {
name: 'Igor',
address: '123 Somewhere'
};
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
templateUrl: 'my-customer.html'
};
});
templateUrl html 結(jié)構(gòu)：
Name: {{customer.name}} Address: {{customer.address}}
輸出結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
說明： 可見 不同的controller 有不同的作用范圍。雖然指令一樣，每次渲染都是分離的，所以我們可以抽象出來指令，用于html模板和代碼的重用,封裝。但是這樣又不是很好，因為用了兩個controller，我們可以使用指令中的scope而不是controller里的scope來替代，具體做法是將外部的scope 映射到指令內(nèi)部的scope, 如下：
② 通過指令屬性映射scope
html結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> <my-customer info="igor"></my-customer> </div>
javascript 結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.igor = { name: 'Igor', address: '123 Somewhere' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-iso.html'
};
});
templateUrl html結(jié)構(gòu)：
Name: {{customerInfo.name}} Address: {{customerInfo.address}}
編譯后的html結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Igor Address: 123 Somewhere
③ 指令中的如果定義scope屬性則html中的scope不會直接繼承controller中的scope，在html中使用的都需要在scope:{}中聲明，否則就是undefined
html 結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> <my-customer info="naomi"></my-customer> </div>
javascript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.naomi = { name: 'Naomi', address: '1600 Amphitheatre' };
$scope.vojta = { name: 'Vojta', address: '3456 Somewhere Else' };
}])
.directive('myCustomer', function() {
return {
restrict: 'E',
scope: {
customerInfo: '=info'
},
templateUrl: 'my-customer-plus-vojta.html'
};
});
templateUrl html結(jié)構(gòu)：
Name: {{customerInfo.name}} Address: {{customerInfo.address}}
<br>
Name: {{vojta.name}} Address: {{vojta.address}}
html編譯后的結(jié)果：
Name: Naomi Address: 1600 Amphitheatre
Name: Address:
說明： vojta 在指令中的scope沒有被定義，不會直接繼承在controller中的，那么他就是undefined，所以就是空白(什么都不顯示)
可操作DOM的指令
創(chuàng)建一個用于操作dom的指令，如果需要dom操作也都應(yīng)該放在指令里。
html 結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl"> Date format: <input ng-model="format"> <hr/> Current time is: <span my-current-time="format"></span> </div>
javascript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.format = 'M/d/yy h:mm:ss a';
}])
.directive('myCurrentTime', function($interval, dateFilter) {
return {
restrict: 'AE',
link: function(scope, element, attr){
var format, timeoutId;
/* 更新時間函數(shù) */
function updateTime() {
element.text(dateFilter(new Date(), format));
}
/* 監(jiān)視時間格式的改變 */
var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
/* 定時器 */
timeoutId = $interval(function() {
updateTime(); // update DOM
}, 1000);
/* 頁面跳轉(zhuǎn)后移除定時器防止內(nèi)存泄露 */
element.on('$destroy', function() {
$interval.cancel(timeoutId);
attrWatch(); // 移除watch
});
}
};
});
說明： 在link函數(shù)中，操作dom節(jié)點(diǎn)，讓dom的文本節(jié)點(diǎn)動態(tài)顯示時間跳動。在頁面跳轉(zhuǎn)之后及時清除定時器和監(jiān)視器以免發(fā)生內(nèi)存泄漏。
通過transclude和ng-transclude創(chuàng)建可包裹其他元素的指令
html結(jié)構(gòu)：
<div ng-app="myApp" ng-controller="myCtrl">
<my-dialog>Check out the contents, {{name}}!</my-dialog>
</div>
javascript結(jié)構(gòu)：
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.name = 'Tobias';
}])
.directive('myDialog', function() {
return {
restrict: 'E',
transclude: true,
scope: {},
templateUrl: 'my-dialog.html',
link: function(scope) {
scope.name = 'Jeff';
}
};
});
templateUrl html 結(jié)構(gòu)：
<div class="alert" ng-transclude></div>
編譯后的html結(jié)構(gòu)：
Check out the contents, Tobias!
說明： 指令中的scope本應(yīng)隔離controller中的作用域的，但是由于設(shè)置了transclude=true選項，scope就會繼承controller中的定義，所以最終是Tobias而不是Jeff。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular5給組件本身的標(biāo)簽添加樣式class的方法
本篇文章主要介紹了Angular 5 給組件本身的標(biāo)簽添加樣式class的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
基于AngularJS實(shí)現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能
本文主要給大家介紹基于AngularJS實(shí)現(xiàn)頁面滾動到底自動加載數(shù)據(jù)的功能，通過第三方控件來實(shí)現(xiàn)，感興趣的朋友跟著小編一起看看具體實(shí)現(xiàn)代碼吧2015-10-10
基于AngularJS實(shí)現(xiàn)表單驗證功能
這篇文章主要為大家詳細(xì)介紹了基于AngularJS實(shí)現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
AngularJS自定義服務(wù)與fliter的混合使用
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁的兩種方式，一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁，另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁，有需要的朋友們可以來參考借鑒，下面來一起看看吧。2016-09-09
Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之實(shí)現(xiàn)綁定和分包，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要給大家介紹了關(guān)于Angular如何處理未可知異常錯誤的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
關(guān)于Angularjs中跨域設(shè)置白名單問題
這篇文章主要介紹了Angularjs中關(guān)于跨域設(shè)置白名單問題,需要的朋友可以參考下2018-04-04
詳解AngularJs中$resource和restfu服務(wù)端數(shù)據(jù)交互
之前小編和大家分享過使用$http同服務(wù)器進(jìn)行通信，但是功能上比較簡單，angularjs還提供了另外一個可選的服務(wù)$resource,使用它可以非常方便的同支持restful的服務(wù)單進(jìn)行數(shù)據(jù)交互。下面來一起看看吧。2016-09-09
angularjs $http調(diào)用接口的方式詳解
今天小編就為大家分享一篇angularjs $http調(diào)用接口的方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08