AngularJS指令繼承

我是Angular的新手，我有一個關於指令和繼承的問題。假設有兩個指令：AngularJS指令繼承

<my-pic my-log="log pic"  my-warn="pic warn" my-src="/some/url/pic.jpg"></my-pic> 
<my-button my-log="log button" my-warn="button warn" my-text="button text"></my-button>

JS-代碼

angular.module("app", []) 
.directive("myPic",function(){ 
    return { 
     restrict: "E" 
     ,scope: { 
      log: "@myLog" 
      ,src: "@mySrc" 
      ,warn:"@myWarn" 
     } 
     ,template: '<img src="{{src}}" title="{{log}} | {{warn}}"></img>' 
     ,controller: function($scope, $log){ 
      $log.log($scope.log); 
      $log.warn($scope.warn); 
     } 
    }; 
}) 
.directive("myButton",function(){ 
    return { 
     restrict: "E" 
     ,scope: { 
      log: "@myLog" 
      ,text: "@myText" 
      ,warn: "@myWarn" 
     } 
     ,template: '<button title="{{log}} | {{warn}}">{{text}}</button>' 
     ,controller: function($scope, $log){ 
      $log.log($scope.log); 
      $log.warn($scope.warn); 
     } 
    }; 
});

典筆 http://codepen.io/anon/pen/VLMdRL

問題

問題是，是否可以創建第三個指令，從中可以派生出MyPic和MyButton指令，並處理my-log =「...」和my-warn =「...」屬性（ $日誌代碼和標題屬性添加到模板代碼）？ my-log和my-warn屬性必須由相同的指令處理，並且屬性值仍應由子指令訪問。

感謝您的幫助！

來源

2015-06-20 Humppakäräjät

指令只能繼承他的父母控制範圍，只有當他們是嵌套和孩子的指示已經提出父指令爲'require' –

有沒有其他方法可以完成我想要做的事情？與接受$ scope和$ element對象作爲參數的服務一樣？或者，在服務中操作DOM是否是一個非常糟糕的主意？ –

是的，從服務中操縱DOM是個壞主意。首選的方式是DOM ..你可以考慮事件'$ broadcast'或'$ emit'在這種情況下 –

在這種情況下，您不需要繼承。只需編寫一個服務來處理您的常見日誌記錄操作並將其注入到您的指令中。

來源

2015-06-20 22:42:16

那麼如何實現DOM操作呢？根據pankajparkar，在服務中操作DOM是一個糟糕的主意。 –

不要以爲要操縱DOM，AngularJS無論如何處理這個。你應該只操作你的值（狀態）。記錄和更改值由服務進行。順便說一句，我在你的指令代碼中看不到任何DOM操作。所有變量都已被綁定。您需要一個功能，它執行相同的業務邏輯，所以這是一種服務方法。如果需要，將範圍變量作爲參數提供給服務方法。 –

對於DOM操作，我的意思是該指令應該將title =「{{log}} | {{warn}}」屬性添加到模板中。 –

好吧，我找到了一個我可以生活的解決方案，但也許有更好的解決方案來做到這一點。我所做的是，我創建了第三個指令'myLogger'，然後將其添加到'myButton'和'myPic'指令的模板中。我還創建了一個定義爲常量的函數，並將日誌記錄屬性添加到指令的範圍中。 'myLogger'指令執行控制檯日誌記錄並將'title'屬性廣告給HTML元素。

任何建議/想法，以改善解決方案是非常受歡迎的。如果有人有更好的解決方案，我也會很感激。

HTML代碼：

<my-pic my-log="log pic"  my-warn="pic warn" my-src="/some/url/pic.jpg"></my-pic> 
<my-button my-log="log button" my-warn="button warn" my-text="button text"></my-button>

Javascript代碼：

angular.module("app", []) 
.constant("addLogScope",function(opts){ 
    return angular.extend(opts || {},{ 
     myWarn: "@" 
     ,myLog: "@" 
    }); 
}) 
.directive("myLogger",function(){ 
    return { 
     restrict: "A" 
     ,scope: true 
     ,controller: function($scope, $log){ 
      console.log($scope.myLog); 
      console.info($scope.myWarn); 
     } 
     ,link: function($scope, $element, $attrs){ 
      $element.prop("title",$scope.myLog + " | " + $scope.myWarn); 
     } 
    }; 
}) 
.directive("myPic",function(addLogScope){ 
    return { 
     restrict: "E" 
     ,scope: addLogScope({ 
      mySrc: "@" 
     }) 
     ,transclude: true 
     ,template: '<img src="{{mySrc}}" my-logger></img>' 
     ,controller: function($scope){ 
     } 
    }; 
}) 
.directive("myButton",function(addLogScope){ 
    return { 
     restrict: "E" 
     ,scope: addLogScope({ 
      myText: "@" 
     }) 
     ,template: '<button my-logger>{{myText}}</button>' 
     ,controller: function($scope){ 
     } 
    }; 
});

典筆：http://codepen.io/anon/pen/rVYgew

來源

2015-06-25 18:01:38

AngularJS指令繼承

回答

相關問題