Tab Giao diện người dùng Jquery không hoạt động trong AngularJS

Question

Tôi đang sử dụng tab giao diện người dùng jquery trong angularJS và sử dụng ng-repeat để tạo các mục danh sách và các vùng chứa tab. Các tab đang hoạt động nhưng các vùng chứa tab không hoạt động đúng cách.

mẫu - 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> 

Chỉ

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

liên kết jsfiddle: http://jsfiddle.net/sannitesh/NLw6y/

Answer 1

Vấn đề là khi các chỉ thị ngTabs được thực hiện các nội dung về điều đó div chưa được tạo. Gói cuộc gọi đến .tabs() trong setTimeout sẽ thực hiện thủ thuật.

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

xem jsFiddle. Đây có thể không phải là cách tốt nhất/cách góc cạnh.

Bạn có thể xem dịch vụ compile đặc biệt nếu các tab thực tế thay đổi khi chạy.