如何在單個指令中包含多個div？

我想在一個指令中包含多個div。但該指令只對第一個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的複選框元素。將控制檯從指令中添加出來：

如果我包含transclude：true，它將刪除元素上的所有早期指令，頁面變爲空白。

來源

2016-04-02 user_dev

難以理解*「將其他div放入其中」*沒有正確解釋預期結果。換句話說，你不清楚你的問題是什麼。一個plunker演示也將幫助 – charlietfl

我試圖創建一個jsfiddle，但無法複製相同。問題是，我有這樣的結構：

some data

。但我的指令只適用於第一格而不是第二和第三格。 –

除非你可以在演示中重現問題，否則不容易幫助 – charlietfl

這不會發生，因爲ng-repeat會爲自己創建單獨的作用域。您還需要包含在div上，或者修改您的指令以不使用隔離範圍。

來源

2016-04-02 18:11:44 atefth

所以我應該創建一個更多的div並附上該div內的所有內容？ –

不，你應該在你想讓你的複選框出現的地方使用每個div的指令。 – atefth

我試過了，但是它會加載所有的ng-repeat。我希望它包含內部的ng-repeat。 –

如何在單個指令中包含多個div？

回答

相關問題