Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法詳解
更新時間:2016年08月05日 11:52:24 作者:Quber
這篇文章主要介紹了Angularjs使用directive自定義指令實現(xiàn)attribute繼承的方法,結合實例形式較為詳細的分析了基于directive自定義指令實現(xiàn)attribute繼承的具體步驟與相關技巧,需要的朋友可以參考下
本文實例講述了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> 我是測試的模板內容! </div>
三、Js代碼:
//初始化Angular對象 var myNg = angular.module('mainApp', []); myNg.directive('quberGrid', function () { return { restrict: 'EA', replace: true,//移除<quber-grid>標簽 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') { //設置標簽屬性和值 attr.$set(key, val); } }); }); } }; }); myNg.controller('mainController', function ($scope) { });
效果如下:
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
Angular.js實現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關于Angular.js實現(xiàn)動態(tài)加載組件的相關資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-05-05詳解angular2實現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實現(xiàn)ng2-router 路由和嵌套路由,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03