Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法詳解
更新時間：2016年08月05日 11:52:24 作者：Quber
這篇文章主要介紹了Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法,結(jié)合實例形式較為詳細(xì)的分析了基于directive自定義指令實現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下
本文實例講述了Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法。分享給大家供大家參考，具體如下：
一、Html代碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="../../Content/Plugins/Angular/angular.min.js"></script> </head> <body ng-app="mainApp" ng-controller="mainController"> <quber-grid style="border: 1px solid #f00;" title="qubernet"></quber-grid> </body> </html>
二、tmp.html文件
<div quber-grid-attr> 我是測試的模板內(nèi)容！ </div>
三、Js代碼：
//初始化Angular對象
var myNg = angular.module('mainApp', []);
myNg.directive('quberGrid', function () {
return {
restrict: 'EA',
replace: true,//移除<quber-grid>標(biāo)簽
templateUrl: 'tmp.html',
link: function (sco, ele, attr) {
//通知下屬DOM，執(zhí)行名為sendChildGridAttr的事件
sco.$broadcast('sendChildGridAttr', attr);
}
};
});
myNg.directive('quberGridAttr', function () {
return {
restrict: 'A',
link: function (sco, ele, attr) {
sco.$on('sendChildGridAttr', function (event, data) {
angular.forEach(data, function (val, key, obj) {
if (key != '$attr' && key != '$$element') {
//設(shè)置標(biāo)簽屬性和值
attr.$set(key, val);
}
});
});
}
};
});
myNg.controller('mainController', function ($scope) { });
效果如下：
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)網(wǎng)站換膚的簡單實例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Angular ElementRef簡介及其使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
Angular.js實現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實現(xiàn)動態(tài)加載組件的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
angular.js 自帶jsonp，實現(xiàn)跨域，下面來實現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-02-02
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對DOM操作的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2016-11-11
當(dāng)Angular項目的規(guī)模到達(dá)一定的程度，就需要進(jìn)行測試工作了。為什么要自動化測試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細(xì)介紹了Angular.Js的自動化測試，有需要的朋友們可以參考借鑒。2016-12-12
詳解angular2實現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實現(xiàn)ng2-router 路由和嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家介紹了Angular 獨(dú)立組件入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04