Наложение директивы AngularJS

Question

Я довольно новичок в Angular, и у меня возник вопрос о директивах и наследовании. Давайте предположим, что есть две директивы:

<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); 
     } 
    }; 
}); 

Код Pen http://codepen.io/anon/pen/VLMdRL

ВОПРОС

Вопрос в том, можно ли создать третью директиву, из которой могут быть выведены директивы MyPic и MyButton, и которые обрабатывают атрибуты my-log = "..." и my-warn = "..." ($ log code и добавление атрибута title в код шаблона)? Атрибуты my-log и my-warn должны обрабатываться одной и той же директивой, а значения атрибутов должны быть доступны дочерними директивами.

Благодарим за помощь!

Answer 1

В этом случае вам не нужно наследование. Просто напишите службу, чтобы обрабатывать общие операции ведения журнала и вводить ее в свои директивы.

Answer 2

Хорошо, я нашел решение, с которым я могу жить, но, возможно, есть лучшее решение для этого. То, что я сделал, я создал третью директиву «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