詳解angular 中的自定義指令之詳解API
自定義屬性的四種類(lèi)別
分為： 元素E，屬性A，注釋M，類(lèi)C , 分別如下：
<my-dir></my-dir> <span my-dir="exp"></span> <!-- directive: my-dir exp --> <span class="my-dir: exp;"></span>
簡(jiǎn)單創(chuàng)建一個(gè)指令
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
說(shuō)明： 此處，myCtrl 中定義的 $scope.customer 屬性和屬性值都在指令中的模板使用了。同樣的，在指令return 對(duì)象中的 template 也可被替換成一路徑，在路徑html中書(shū)寫(xiě)和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
說(shuō)明： templateUrl 的值可以是一個(gè)函數(shù)返回值，返回用于指令中的html模板的url。
隔離指令的作用域
① 通過(guò)不同的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
說(shuō)明： 可見(jiàn) 不同的controller 有不同的作用范圍。雖然指令一樣，每次渲染都是分離的，所以我們可以抽象出來(lái)指令，用于html模板和代碼的重用,封裝。但是這樣又不是很好，因?yàn)橛昧藘蓚€(gè)controller，我們可以使用指令中的scope而不是controller里的scope來(lái)替代，具體做法是將外部的scope 映射到指令內(nèi)部的scope, 如下：
② 通過(guò)指令屬性映射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不會(huì)直接繼承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:
說(shuō)明： vojta 在指令中的scope沒(méi)有被定義，不會(huì)直接繼承在controller中的，那么他就是undefined，所以就是空白(什么都不顯示)
可操作DOM的指令
創(chuàng)建一個(gè)用于操作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í)間函數(shù) */
function updateTime() {
element.text(dateFilter(new Date(), format));
}
/* 監(jiān)視時(shí)間格式的改變 */
var attrWatch = scope.$watch(attrs.myCurrentTime, function(value) {
format = value;
updateTime();
});
/* 定時(shí)器 */
timeoutId = $interval(function() {
updateTime(); // update DOM
}, 1000);
/* 頁(yè)面跳轉(zhuǎn)后移除定時(shí)器防止內(nèi)存泄露 */
element.on('$destroy', function() {
$interval.cancel(timeoutId);
attrWatch(); // 移除watch
});
}
};
});
說(shuō)明： 在link函數(shù)中，操作dom節(jié)點(diǎn)，讓dom的文本節(jié)點(diǎn)動(dòng)態(tài)顯示時(shí)間跳動(dòng)。在頁(yè)面跳轉(zhuǎn)之后及時(shí)清除定時(shí)器和監(jiān)視器以免發(fā)生內(nèi)存泄漏。
通過(guò)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!
說(shuō)明： 指令中的scope本應(yīng)隔離controller中的作用域的，但是由于設(shè)置了transclude=true選項(xiàng)，scope就會(huì)繼承controller中的定義，所以最終是Tobias而不是Jeff。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了angular簡(jiǎn)介和其特點(diǎn)介紹,本文講解了關(guān)于和jquery的比較、關(guān)于適用場(chǎng)合、關(guān)于UI的結(jié)合、關(guān)于angularjs的特點(diǎn)等內(nèi)容,需要的朋友可以參考下2015-01-01
在html規(guī)范里面,它定義了非常多的標(biāo)簽,在這些標(biāo)簽里面,相同標(biāo)簽之間的嵌套,不同標(biāo)簽之間的嵌套,是十分常見(jiàn),在Angular里面,我們可以通過(guò)自定義標(biāo)簽的方式引用組件,這里的標(biāo)簽?zāi)芊裣裨膆tml標(biāo)簽一樣,來(lái)嵌入html標(biāo)簽,或者嵌套其他組件標(biāo)簽?zāi)?本文將介紹投影的作用。2021-05-05
angularJs使用$watch和$filter過(guò)濾器制作搜索篩選實(shí)例
本篇文章主要介紹了angularJs使用$watch和$filter過(guò)濾器制作搜索篩選實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
AngularJS基礎(chǔ) ng-submit 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-submit 指令,這里對(duì)ng-submit 指令的基礎(chǔ)資料做了詳細(xì)介紹整理，并附有代碼示例，有需要的小伙伴可以參考下2016-08-08
Angular7中創(chuàng)建組件/自定義指令/管道的方法實(shí)例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-04-04
利用Angularjs和原生JS分別實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框
現(xiàn)在的很多網(wǎng)站都將輸入框做成了動(dòng)態(tài)的效果，這樣對(duì)于用戶(hù)體檢來(lái)說(shuō)非常好，這篇文章分別用Angularjs和原生JS兩種方法來(lái)實(shí)現(xiàn)動(dòng)態(tài)效果的輸入框，具有一定的參考價(jià)值，有需要的小伙伴們可以來(lái)參考借鑒。2016-09-09
angular5 httpclient的示例實(shí)戰(zhàn)
本篇文章主要介紹了angular5 httpclient的示例實(shí)戰(zhàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
前后端如何實(shí)現(xiàn)登錄token攔截校驗(yàn)詳解
這篇文章主要給大家介紹了關(guān)于前后端如何實(shí)現(xiàn)登錄token攔截校驗(yàn)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-09-09
本文主要介紹AngularJS 雙向綁定，這里整理了詳細(xì)的知識(shí)資料并講解，而且附有代碼示例，有興趣的小伙伴可以參考下2016-08-08
AngularJs導(dǎo)出數(shù)據(jù)到Excel的示例代碼
本篇文章主要介紹了AngularJs導(dǎo)出Excel的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08