Question

我尝试了这个问题的答案。 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;

});

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

enter image description here

我正在使用jQuery UI Tabs，因为我需要它来使用IE8，Angular Bootstrap中的Tabset在IE8中无法正常工作。

Answer 1

尝试添加这段代码，看看这是否有效。

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

与Angular JS绑定的jQuery UI Tab

1 个答案: