2つのangular.jsディレクティブの使い方は？

Question

私は、スクリーン上のdom要素を接続するための2つのディレクティブを定義しました。両方のディレクティブは、別々のディレクティブとして使用するとうまく動作します。私は他のディレクティブで1つのディレクティブ要素を使用しようとしていますが、これまでには失敗しました。ここに私のコードです。

angular.module('mainModule').directive('createConnections', function($interval) { 
    return { 
     restrict: 'EA', 
     link: function(scope, element, attrs) { 

      element.connections({ from:'div.new-div' }).length; 
      /*element.connections(attrs).length;*/ 
      var connections = angular.element('connection, inner'); 
      $interval(function() { connections.connections('update') }, 10); 
     } 
    }; 
}); 


angular.module('mainModule').directive('updateConnections', function($interval) { 
    return { 
     restrict: 'EA', 

     link: function(scope, element, attrs) { 


      element.connections({ from:'div.actor{{index}}' }).length; 
      /*element.connections(attrs).length;*/ 
      var connections = angular.element('connection, inner'); 
      $interval(function() { connections.connections('update') }, 10); 
     } 
    }; 
}); 

templteコード：

<div create-connections class="actor\{{$index}}" > 

     <span><button class=" aui-button dialog-show-button-impact" style="float: left" title="$i18n.getText('add.activity')" 
         id ="div.actor-\{{$index}}" ng-click="addActivity(actor)"><span class="aui-icon aui-icon-small aui-iconfont-add">Add</span> 
     </button>\{{actor}}</span> 
    <br/> 
</div> 



<div ng-repeat="activity in activities"> 



     <div update-connections ng-if="actor == activity.id" style="margin-left: -45%;"> 

      <div class="actor\{{actors.indexOf(actor)}}"> 
      </div> 


       <div ng-repeat = "impact in activity.text" class="impact\{{$index}}" id=""> 

        \{{impact}}</div> 
      </div> 

     </divupdate-connections> 

</div> 

私は、それぞれの親要素に要素の第2のレベルを接続することはできませんよ。

Answer 1

createConnectionディレクティブを交換

angular.module('mainModule').directive('createConnections', function($interval) { 
return { 
    restrict: 'EA', 
    transclude:true, 
    link: function(scope, element, attrs) { 

     element.connections({ from:'div.new-div' }).length; 
     /*element.connections(attrs).length;*/ 
     var connections = angular.element('connection, inner'); 
     $interval(function() { connections.connections('update') }, 10); 
    }, 
    template:'<div ng-transclude></div> 
}; 
}); 

Answer 2

は、更新された接続名の俳優-ID内の属性を追加しました。

は、attrs actor-idを取得し、それを要素に接続するようにディレクティブを更新しました。

angular.module('mainModule').directive('updateConnections', function($interval) { 
    return { 
     restrict: 'EA', 

     link: function(scope, element, attrs) { 

      attrs.$observe('actorId', function(value) { 
       console.log('actorId=', value); 

       /* value =" '"+ "div." + value + "' "; 
       console.log("Connection value:" + value)*/ 

       element.connections({ from: 'div.'+ value}).length; 
       element.connections(attrs).length; 
       var connections = angular.element('connection, inner'); 
       $interval(function() { connections.connections('update') }, 10); 
      }); 


     } 
    }; 
});