Angularjs使用directive自定義指令實(shí)現(xiàn)attribute繼承的方法詳解

更新時(shí)間：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>
  我是測(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ì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Angular學(xué)習(xí)筆記之a(chǎn)ngular的$filter服務(wù)淺析
本文是小編記錄的angular學(xué)習(xí)筆記，通過(guò)本文首先給大家介紹了$filter服務(wù)，然后介紹下內(nèi)置filter及filter的簡(jiǎn)單使用，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-11-11
SeaJS 與 RequireJS 的差異對(duì)比
這篇文章主要介紹了SeaJS 與 RequireJS 的差異對(duì)比,本文主要對(duì)CMD規(guī)范和AMD規(guī)范的弊端做了對(duì)比,并做出了一個(gè)總結(jié),需要的朋友可以參考下
2014-12-12
angular8.5集成TinyMce5的使用和詳細(xì)配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細(xì)配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
使用xampp將angular項(xiàng)目運(yùn)行在web服務(wù)器的教程
這篇文章主要介紹了使用xampp將angular項(xiàng)目運(yùn)行在web服務(wù)器,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-09-09
Angular2表單自定義驗(yàn)證器的實(shí)現(xiàn)
本文給大家介紹angular2表單自定義驗(yàn)證器的實(shí)現(xiàn)，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧
2016-10-10
Angularjs 實(shí)現(xiàn)移動(dòng)端在線測(cè)評(píng)效果(推薦)
這篇文章主要介紹了Angularjs 實(shí)現(xiàn)移動(dòng)端在線測(cè)評(píng)效果,需要的朋友可以參考下
2017-04-04
Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà)
這篇文章主要介紹了Angular2搜索和重置按鈕過(guò)場(chǎng)動(dòng)畫(huà),需要的朋友可以參考下
2017-05-05
Angular?服務(wù)器端渲染錯(cuò)誤消息localStorage?is?not?defined解決分析
這篇文章主要為大家介紹了Angular?服務(wù)器端渲染錯(cuò)誤消息localStorage?is?not?defined解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Angularjs中的頁(yè)面訪問(wèn)權(quán)限怎么設(shè)置
最近一直在忙一個(gè)手機(jī)端的項(xiàng)目，所以對(duì)js學(xué)習(xí)有點(diǎn)松撤了。今天小編抽時(shí)間跟大家分享一篇關(guān)于angularjs中的頁(yè)面訪問(wèn)權(quán)限設(shè)置教處，對(duì)angularjs訪問(wèn)權(quán)限感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
AngularJs表單驗(yàn)證實(shí)例代碼解析
這篇文章主要介紹了AngularJs表單驗(yàn)證實(shí)例代碼解析,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-11-11