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還沒有生成。在setTimeout中將調用包裝爲.tabs（）會起到一定作用。

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

看到jsFiddle。這可能不是最好的方式/角度方式。

您可以看看compile服務，特別是如果實際選項卡在運行時更改。