我在 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/ http://jsfiddle.net/sannitesh/NLw6y/
问题是,当执行 ngTabs 指令时,该 div 的内容尚未生成。将对 .tabs() 的调用包装在 setTimeout 中即可达到目的。
myApp.directive('ngTabs', function() {
return function(scope, elm) {
setTimeout(function() {
elm.tabs();
},0);
};
});
see jsFiddle http://jsfiddle.net/NLw6y/32/。这可能不是最好的方式/有角度的方式。
你可以看一下compile http://docs.angularjs.org/api/ng.%24compile服务,尤其是当实际选项卡在运行时发生变化时。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)