這篇文章主要介紹了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)文章

淺談Angular 的變化檢測的方法
這篇文章主要介紹了淺談Angular 的變化檢測的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
AngularJS實(shí)現(xiàn)網(wǎng)站換膚實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJS實(shí)現(xiàn)網(wǎng)站換膚的簡單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
Angular ElementRef簡介及其使用
這篇文章主要介紹了Angular ElementRef簡介及其使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-10-10
Angular.js實(shí)現(xiàn)動態(tài)加載組件詳解
這篇文章主要給大家介紹了關(guān)于Angular.js實(shí)現(xiàn)動態(tài)加載組件的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。
2017-05-05
Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來實(shí)現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
2017-02-02
AngularJS中的DOM操作用法分析
這篇文章主要介紹了AngularJS中的DOM操作,較為詳細(xì)的分析了AngularJS針對DOM操作的原理、實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2016-11-11
Angular.Js的自動化測試詳解
當(dāng)Angular項(xiàng)目的規(guī)模到達(dá)一定的程度，就需要進(jìn)行測試工作了。為什么要自動化測試？1，提高產(chǎn)出質(zhì)量。2，減少重構(gòu)時的痛。反正我最近重構(gòu)多了，痛苦經(jīng)歷多了。3，便于新人接手。下面這篇文章就給大家詳細(xì)介紹了Angular.Js的自動化測試，有需要的朋友們可以參考借鑒。
2016-12-12
詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由
本篇文章主要介紹了詳解angular2實(shí)現(xiàn)ng2-router 路由和嵌套路由，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Angular 獨(dú)立組件入門指南
這篇文章主要為大家介紹了Angular 獨(dú)立組件入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
angular2 NgModel模塊的具體使用方法
這篇文章主要介紹了angular2 NgModel模塊的具體使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04