【发布时间】：2015-02-05 06:45:36
【问题描述】：
我尝试了这个问题的答案。 Jquery UI tab not working in AngularJS
但我用我的应用程序尝试过，div 会重复。
这是我的代码，
HTML
<html data-ng-app="recipes">
<!--- links and sources -->
<body data-ng-controller="recipe-controller">
<div id="tabs" ng-tabs>
<ul>
<li ng-repeat="page in jPages">
<a class="pageName" href="#{{page.id}}">{{page.name}}</a>
</li>
</ul>
<div id="{{page.id}}" ng-repeat="page in jPages">
<p>{{page.id}}</p>
</div>
</div>
</body>
</html>
JS
var app = angular.module('recipes', ['ui.bootstrap', 'ngSanitize', 'timer', 'emoji', 'ngGrid', 'ngCsv', 'xeditable'])
app.directive('ngTabs', function() {
return function(scope, elm) {
setTimeout(function() {
elm.tabs();
},0);
};
});
app.controller('recipe-controller', function ($scope, $http, $filter, $modal, $timeout, recipesFactory, config, ShoppingListsFactory, $rootScope) {
var pageArray = [
{
"id": "tab1",
"name": "tab1"},
{
"id": "tab2",
"name": "tab2"},
{
"id": "tab3",
"name": "tab3"},
{
"id": "tab4",
"name": "tab4"},
{
"id": "tab5",
"name": "tab5"},
{
"id": "tab6",
"name": "tab6"},
{
"id": "tab7",
"name": "tab7"},
{
"id": "tab8",
"name": "tab8"}
];
$scope.jPages = pageArray;
});
这是我实际输出的屏幕截图。
我正在使用 jQuery UI 选项卡，因为我需要它与 IE8 一起使用，Angular Bootstrap 的 Tabset 在 IE8 中无法正常工作。
【问题讨论】：
-
您的代码看起来不错，您是否尝试将 timeout 的第二个参数设置为更大的值，也许是 200？
-
我刚试了一下，输出还是一样的。
-
我将您的代码复制到正常工作的小提琴中，并删除了所有未使用的各种依赖项。与小提琴相比，您使用的是哪个版本的 angular 和 jquery UI？尝试将您的应用程序剥离为 $scope。可能是模块冲突？还要小心使用标准的 setTimeout()，http://stackoverflow.com/questions/19609796/what-advantage-is-there-in-using-the-timeout-in-angular-js-instead-of-window-se
标签： jquery angularjs jquery-ui jquery-ui-tabs