I am using jquery UI tab in angularJS and used ng-repeat to generate list items and tab containers. Tabs are working but the tab containers are not working properly.
template - 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
.directive('ngTabs', function($rootScope) {
return {
restrict: 'E',
templateUrl: "js/templates/tabs.html",
link: function(scope, elm) {
elm.tabs();
}
};
})
jsfiddle link: http://jsfiddle.net/sannitesh/NLw6y/
The problem is that when the ngTabs directive is executed the content of that div is not generated yet. Wrapping the call to .tabs() in a setTimeout will do the trick.
myApp.directive('ngTabs', function() {
return function(scope, elm) {
setTimeout(function() {
elm.tabs();
},0);
};
});
see jsFiddle. This might not be the best way/the angular way.
You could take a look at the compile service especially if the actual tabs change at runtime.