Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解
本文實(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> 我是測(cè)試的模板內(nèi)容! </div>
三、Js代碼:
//初始化Angular對(duì)象 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) { });
效果如下:
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- 基于Angular.js實(shí)現(xiàn)的觸摸滑動(dòng)動(dòng)畫(huà)實(shí)例代碼
- 利用angularjs1.4制作的簡(jiǎn)易滑動(dòng)門(mén)效果
- 詳解angularJs中自定義directive的數(shù)據(jù)交互
- AngularJS中的Directive自定義一個(gè)表格
- 詳解angular2采用自定義指令(Directive)方式加載jquery插件
- Angularjs自定義指令Directive詳解
- angularjs利用directive實(shí)現(xiàn)移動(dòng)端自定義軟鍵盤(pán)的示例
- Angular.js通過(guò)自定義指令directive實(shí)現(xiàn)滑塊滑動(dòng)效果
相關(guān)文章
AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)網(wǎng)站換膚的簡(jiǎn)單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Angular ElementRef簡(jiǎn)介及其使用
這篇文章主要介紹了Angular ElementRef簡(jiǎn)介及其使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10Angular.js實(shí)現(xiàn)動(dòng)態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動(dòng)態(tài)加載組件的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-05-05Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp,實(shí)現(xiàn)跨域,下面來(lái)實(shí)現(xiàn)搜索框的下拉列表功能,本文思路明確,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-02-02詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03