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的綁定

回答

相關問題