如何使用兩個angular.js指令？

Question

我已經定義了兩個指令來連接屏幕上的DOM元素。當作爲單獨的指令使用時，這兩個指令都可以正常工作。我試圖在其他指令中使用一個指令元素，但迄今爲止失敗。這是我的代碼。

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> 

我不能元素的第二層連接到各自的父母元素。

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


     } 
    }; 
});