kullanarak yinelemeli özel yönergeler AngularJS kullanarak bir ağaç görünümü oluşturmaya çalışıyorum. İşte ngRepeat
benim kod: ağaç şablonumodule.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
JSFiddle çalışmıyor:
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
Diğer ağaç görünümü örneklerine bakarak $ compile'a rastladım ve bu benim aldığım seçenek oldu. Güzel çalışıyor. Orijinal yaklaşımımın neden işe yaramadığının açıklaması için, şimdi belli oluyor! İlgi çekici, neden 'item.childitems' izliyorsunuz? Her çocuk öğesi için bu bir ul ekleyemez mi? – Jon
@Jon Orijinal yanıtımda '$ watch' gibi kullanmamalıyım, 'childitems' değiştiğinde basit bir şekilde 'ul' ekleyecektir. Cevabımı '$ watch' kullanmadan güncelledim. Ayrıca, sorunuzda bulduğunuz ağaç görünümü örneğini herkesin sorunuzdan daha fazla faydalanabilmesi için paylaşır mısınız? –
Artık bu daha yeni sürümlerde (> 1.2) –