1つのディレクティブに複数のdivを含めるにはどうすればよいですか？

Question

私は1つのディレクティブに複数のdivを含めることを試みていますが、ディレクティブは最初のdivでのみ動作し、他のdivはその内部に残ります。

テンプレートコード：

<div actor-check-box ng-repeat="actor in actors"> 

    <div create-connections class="actor\{{$index}}" > 
      <span><input class="checkbox-actor" type="checkbox" name="actor-checkbox" id="actor-checkbox\{{$index}}">\{{actor}}</span> 
    </div> 

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

     <div ng-if="actor == activity.id"> 

      <div ng-repeat = "impact in activity.text" > 
       <div update-connections class="impact\{{$index}}actor\{{actors.indexOf(actor)}}" actor-id="actor\{{actors.indexOf(actor)}}"> 
        <span><input class="checkbox-activity" type="checkbox" name="impact-checkbox" id="activity-checkbox\{{$index}}actor\{{actors.indexOf(actor)}}" activity-check-box>\{{impact}}</span> 
       </div> 

       <div ng-repeat="feature in features"> 

        <div ng-if="actor == feature.id && impact == feature.key"> 
         <div feature-connection ng-repeat = "feature in feature.text" class="feature\{{$index}}" activity-id="impact\{{activity.text.indexOf(impact)}}actor\{{actors.indexOf(actor)}}" id=""> 
           <span><input class="checkbox" type="checkbox" name="impact-checkbox" id="" >\{{feature}}</span> 
         </div> 
        </div> 

       </div> 

      </div> 

     </div> 

    </div> 

</div> 

指令コード：

angular.module('mainModule').directive('actorCheckBox', function($interval) { 

    return { 
     restrict: 'EA', 
     /*transclude: true,*/ 

     link: function (scope, element, attrs, ctrl) { 

      scope.$watch('ngModel', function(newValue){ 
       /*alert(newValue);*/ 
       console.log(element.find('input[type="checkbox"]')); 
       /*console.log(element.find('input[class="checkbox-actor"]'));*/ 
       console.log(element.find('input[class="checkbox-activity"]')); 
       console.log(attrs); 

      }); 
     } 
    } 
}); 

コンソールで、出力：

[input#actor-checkbox0.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"] 
[input#actor-checkbox1.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"] 
[input#actor-checkbox2.checkbox-actor, prevObject: o.fn.init[1], context: div.ng-scope, selector: "input[type="checkbox"]"] 

だから、問題は、私は3つのdivのを持っているとディレクティブが最初に適用されていますdiv と2つのdivがチェックボックス付きのメインdivの内側にあります。このディレクティブが呼び出されると、コンソールは、他の2つのdivでないmain divのチェックボックス要素のみを表示します。

私がinlude：trueを指定すると、要素の以前のディレクティブがすべて削除され、ページは空白になります。

Answer 1

ng-repeatは別のスコープを作成するので、これは起こりません。また、divにもインクルードするか、独立したスコープを使用しないようにディレクティブを変更する必要があります。