2016-04-02 17 views
1

Tek bir direktifte birden çok div eklemeyi deniyorum. Ancak yönerge yalnızca ilk div üzerinde çalışır ve diğer div'in içinde kalır.Tek bir direktifte birden çok div nasıl eklenir?

Şablon kodu:

<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> 

Yönergesi Kodu: Konsolda

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

      }); 
     } 
    } 
}); 

Çıktı:

[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"]"] 

Yani sorundur Ben 3 div 's var ve direktif ilk uygulanır div ve 2 div, div kutusunun içinde checkbox ile birlikte. Yönerge konsol olarak adlandırıldığında, sadece diğer 2 div'lerin değil, ana boşlukta onay kutusu öğesini gösterir. Konsolu ek olarak direktiften de ekleyin:

Eğer translutüre inülsem: true öğedeki tüm önceki yönergeleri kaldırır ve sayfa boş kalır.

+3

Anlamak zor * "diğer divun içindekileri bırakır" * beklenen sonuçların ne olduğuna dair uygun bir açıklama yapılmadan. Başka bir deyişle, senin sorunun ne olduğu belli değil. Bir plunker demosu aynı zamanda – charlietfl

+0

'a yardım ederdi, bir jsfiddle oluşturmaya çalıştım ancak aynısını kopyalayamadım. Sorun şu ki, böyle bir yapıya sahibim:

some data
some data
. Ama benim direktifim sadece ikinci ve üçüncü div için değil ilk div için çalışıyor. –

+0

Bir demoda sorunu yeniden üretemezseniz, yardımcı olmak kolay değildir – charlietfl

cevap

0

Bu gerçekleşmiyor çünkü ng-repeat kendisi için ayrı kapsamlar oluşturur. İzole kapsamları kullanmamak için divlara da dahil olmanız veya direktifinizi değiştirmeniz gerekir.

+0

Bir tane daha div oluşturmalı ve bu div içindeki her şeyi kapatmalı mıyım? –

+0

hayır direktifin onay kutularının görünmesini istediğiniz her divayı kullanmalısınız. – atefth

+0

Denedim ama tüm ng-yineleri sepely olarak yükler. Dahili ng-yinelemeyi dahil etmesini istiyorum. –

İlgili konular