रिकर्सिव कस्टम ngRepeat

Question

का उपयोग कर निर्देशों मैं एक treeview AngularJS का उपयोग कर बनाने के लिए कोशिश कर रहा हूँ।

यहाँ मेरी कोड है:

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

Treeview टेम्पलेट:

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

Treeview आइटम टेम्पलेट:

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

treeview निर्देश $scope.items में विकास के लिए hardcoded है - अंत में मैं इस आशा सेवा से डेटा खींचने वाले नियंत्रक/सेवा से आएगा आर। हालांकि यह उस मूल संरचना के प्रकार का प्रतिनिधित्व करता है जिसे मैं ढूंढ रहा हूं।

जब मैं इस treeviewItem में नेस्टेड उल बिना चला यह मेरे पहले तीन आइटम ठीक कर देता है। जब मैं उल को जोड़ता हूं और नियंत्रण के लिए बाल वस्तुओं के साथ नियंत्रण प्राप्त करता हूं तो यह पृष्ठ को हाथ देता है और काम करना बंद कर देता है। के बारे में

http://jsfiddle.net/SKPpv/

मैं कैसे जाना चाहिए: काम नहीं कर रहा -

http://jsfiddle.net/BdmV3/

नेस्टेड उल साथ JSFiddle: -

नेस्टेड उल बिना JSFiddle काम कर रहे हैं (और आपके ब्राउज़र लटका सकता है!) एक नियंत्रण एक कस्टम निर्देश और ngRepeat प्रत्यावर्तन के संभावित अनंत स्तरों बनाने के लिए उपयोग करता है बनाने? मेरा दृष्टिकोण क्यों काम नहीं कर रहा है?

Answer 1

समस्या

कि आप रिकर्सिवली अपने निर्देश को परिभाषित करने की कोशिश कर रहे है, जब कोणीय टेम्पलेट संकलित करने के लिए कोशिश कर रहा था, यह treeview निर्देश देखा था, यह कहा जाता है treeview के समारोह संकलन, तो यह देखा treeviewItem निर्देश, यह treeviewItem कहा जाता है ' रों समारोह संकलन, तो यह treeviewItem निर्देश देखा था, यह treeviewItem तथाकथित 'संकलन रों समारोह, तो यह treeviewItem निर्देश देखा था, यह treeviewItem कहा जाता है की समारोह संकलन ...

समस्या देखते हैं? कार्यों को संकलित करने के लिए कॉल बंद नहीं हो सका। तो, आप अपने टेम्पलेट से बाहर पुनरावर्ती परिभाषा खींच, लेकिन $compile का उपयोग डोम मैन्युअल रूप से बनाने की जरूरत है:

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/

वैकल्पिक रूप से, मैं इतना https://stackoverflow.com/a/11861030/69172 पर पेड़ की तरह डेटा प्रदर्शित करने के लिए एक समाधान मिल गया। समाधान हालांकि निर्देशों के बजाय ngInclude का उपयोग करता है।