Jquery UI टैब AngularJS

Question

में काम नहीं कर रहा है मैं angularJS में jquery UI टैब का उपयोग कर रहा हूं और सूची आइटम और टैब कंटेनर उत्पन्न करने के लिए ng-repeat का उपयोग करता हूं। टैब काम कर रहे हैं लेकिन टैब कंटेनर ठीक से काम नहीं कर रहे हैं।

टेम्पलेट - tabs.html

<ul ng-sortable="pages"> 
    <li ng-controller="pageCtrl" ng-repeat="page in pages"> 
     <a class="pageName" href="#{{page.id}}">{{page.name}}</a> 
    </li> 
</ul> 
<div id="{{page.id}}" ng-repeat="page in pages"> 
    <p>{{page.id}}</p> 
</div> 

निर्देशक

.directive('ngTabs', function($rootScope) { 
     return { 
      restrict: 'E', 
      templateUrl: "js/templates/tabs.html", 
      link: function(scope, elm) { 
       elm.tabs(); 
      } 
     }; 
    }) 

jsfiddle लिंक: http://jsfiddle.net/sannitesh/NLw6y/

Answer 1

समस्या यह है कि जब ngTabs निर्देश है कि की सामग्री निष्पादित किया जाता है div अभी तक उत्पन्न नहीं हुआ है। एक सेटटाइमआउट में .tabs() को कॉल लपेटकर चाल चल जाएगी।

myApp.directive('ngTabs', function() { 
    return function(scope, elm) { 
     setTimeout(function() { 
      elm.tabs(); 
     },0); 
    }; 
}); 

jsFiddle देखें। यह सबसे अच्छा तरीका/कोणीय तरीका नहीं हो सकता है।

आप compile सेवा पर विशेष रूप से देख सकते हैं यदि वास्तविक टैब रनटाइम पर बदलते हैं।