jQuery UI Tab与Angular JS的绑定

我试过了这个问题的答案。 Jquery UI tab not working in AngularJS jQuery UI Tab与Angular JS的绑定

但我试过用我的应用程序，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>

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; 

});

这是我的实际输出的屏幕截图。

enter image description here

我使用jQuery UI选项卡工作，因为我需要它与IE8的工作，从标签集角引导不正确的IE8工作。

来源

2015-02-05 Aaron

您的代码看起来不错，您是否尝试将超时的第二个参数设置为更大的值，200也许？ – itd

我只是试过了，输出是一样的。 – Aaron

我将你的代码复制到了函数的小提琴中，并删除了它没有用到的所有各种依赖。与小提琴相比，您使用的是哪个版本的角度和jQuery UI？尝试将你的应用剥离到$ scope。可能模块相冲突？还要警惕使用标准setTimeout（），[http://stackoverflow.com/questions/19609796/what-advantage-is-there-in-using-the-timeout-in-angular-js-instead-of- window-se]（http://stackoverflow.com/questions/19609796/what-advantage-is-there-in-using-the-timeout-in-angular-js-instead-of-window-se） – ste2425

尝试添加这段代码，看看这是否会工作。

function recipes($scope) { 
    $scope.pages = pageArray; 
}

来源

2015-02-05 07:48:46 Gericke

我是以这个小提琴为例来比较你的代码 - http://jsfiddle.net/NLw6y/32/ – Gericke

但我已经有了一个控制器。 – Aaron

jQuery UI Tab与Angular JS的绑定

回答

相关问题