2

I tried the answer from this question. Jquery UI tab not working in AngularJS

But I tried it with my app, the div repeats itself.

This is my code,

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;

});

This is a screen shot of my actual output.

enter image description here

I am working with jQuery UI Tabs because I need it to work with IE8, Tabset from Angular Bootstrap does not work properly in IE8.

Community
  • 1
  • 1
Aaron
  • 2,591
  • 4
  • 27
  • 45
  • Your code looks ok, have you tried setting the second argument of timeout to a larger value, 200 maybe? – Ziga Petek Feb 05 '15 at 07:28
  • I just tried it, and the output is the same. – Aaron Feb 05 '15 at 07:34
  • I copied your code into the functioning fiddle and removing all your various dependencies that's not being used it functions. Which version of angular and jquery UI are you using compared to the fiddle? Try stripping down your app to just $scope. Possibly modules are conflicting? Also be wary of using the standard 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 May 13 '15 at 14:48

1 Answers1

0

Try adding this piece of code and see if this will work.

function recipes($scope) {
   $scope.pages = pageArray;
}
Gericke
  • 2,109
  • 9
  • 42
  • 71