Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解
更新時間:2016年08月05日 11:52:24 作者:Quber
這篇文章主要介紹了Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了基于directive自定義指令實(shí)現(xiàn)attribute繼承的具體步驟與相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了Angularjs使用directive自定義指令實(shí)現(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)文章
AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)網(wǎng)站換膚的簡單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Angular.js實(shí)現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動態(tài)加載組件的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-05-05Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp,實(shí)現(xiàn)跨域,下面來實(shí)現(xiàn)搜索框的下拉列表功能,本文思路明確,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-02-02詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-03-03