ngRepeat

Question

kullanarak yinelemeli özel yönergeler AngularJS kullanarak bir ağaç görünümü oluşturmaya çalışıyorum. İşte

benim kod:

ağaç şablonu

module.directive('treeview', function() { 
    return { 
     restrict: 'E', 
     templateUrl: "/templates/ui/controls/treeview.htm", 
     replace: true, 
     transclude: true, 
     scope: {}, 
     link: function (scope, element, attrs) { 
      console.log("treeview directive loaded"); 
     }, 
     controller: function ($scope, $rootScope) { 
      $rootScope.depth = 0; 
      $scope.items = [ 
       { text: "face" }, 
       { text: "palm" }, 
       { 
        text: "cake", 
        childitems: [ 
         { text: "1 face" }, 
         { text: "1 palm" }, 
         { text: "1 cake" } 
        ] 
       } 
      ]; 
     } 
    }; 
}); 

module.directive('treeviewItem', function() { 
    return { 
     restrict: 'E', 
     templateUrl: "/templates/ui/controls/treeview-item.htm", 
     replace: true, 
     scope: { 
      item: "=" 
     }, 
     link: function (scope, element, attrs) { 
      console.log("treeview item directive loaded"); 
     } 
    }; 
}); 

:

<div class="sl-treeview"> 
    <ul class="clear" ng-transclude> 
     <treeview-item ng-repeat="item in items" item="item"></treeview-item> 
    </ul> 
</div> 

Treeview Ürün şablonu: treeview direktifi $scope.items yılında

<li> 
    <i class="icon-plus-sign"></i> 
    <a href="/"> 
     <i class="icon-folder-close"></i> 
     {{item.text}} 
    </a> 
    <!-- This ul is the issue - it crashes the page --> 
    <ul> 
     <treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item> 
    </ul> 
</li> 

gelişimi için kodlanma - sonunda ben bu umut hizmetten veri çeken bir denetleyici/hizmetten gelecek r. Ancak, aradığım temel yapıyı temsil ediyor.

Bunu treeviewItem içinde yuvalanmış ul olmadan çalıştırdığımda, bana ilk üç öğeyi verir. Çocuk öğeleri ile bağlamak için kontrolleri almak ve kontrolleri almak için eklediğimde, sayfayı elleriyle çalıştırıp çalışmayı durdurur. İç içe ul olmadan

JSFiddle - İşçi: - (! ve tarayıcınızı askıda kalabilir) iç içe ul ile

http://jsfiddle.net/BdmV3/

JSFiddle çalışmıyor:

http://jsfiddle.net/SKPpv/

Nasıl gitmeli yaklaşık Potansiyel olarak sonsuz özyineleme seviyeleri oluşturmak için özel bir yönerge ve ngRepeat kullanan bir kontrol yapmak? Benim yaklaşımım neden çalışmıyor? şablonu derlemeye çalıştığı sırada açısal

Answer 1

sorun yinelemeli sizin direktifini tanımlamak için çalışıyoruz yani, bu treeview direktifini görünce, bu o zaman treeviewItem direktif, bu treeviewItem denilen gördüm, s fonksiyonunu derlemek 'treeview denilen s işlevini derlemek, o zaman treeviewItem direktifini gördüm, o treeviewItem denilen

sorunu bakın ... s fonksiyonunu derlemek 'o zaman treeviewItem direktifini görünce, s derlemek fonksiyonu, bu treeviewItem denilen'? Derleme işlev çağrıları durdurulamadı. Yani, şablonun dışına yinelemeli tanımı çekin ama elle DOM oluşturmak için $compile kullanmak gerekir:

module.directive('treeviewItem', function ($compile) { 
    return { 
     restrict: 'E', 
     template: '<li><i class="icon-plus-sign"></i><a href="/"><i class="icon-folder-close"></i>{{item.text}}</a></li>', 
     replace: true, 
     scope: { 
      item: "=" 
     }, 
     link: function (scope, element, attrs) { 
      element.append($compile('<ul><treeview-item ng-repeat="childitem in item.childitems" item="childitem"></treeview-item></ul>')(scope)); 

      console.log("treeview item directive loaded"); 
     } 
    }; 
}); 

http://jsfiddle.net/SKPpv/3/

Alternatif olarak, SO https://stackoverflow.com/a/11861030/69172 ağaç benzeri verileri görüntülemek için bir çözüm buldu. Çözüm, direktifler yerine ngInclude kullanır.