jQuery UI Tab binding with Angular JS

Question

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.

Your code looks ok, have you tried setting the second argument of timeout to a larger value, 200 maybe? — Ziga Petek
– Ziga Petek, Commented Feb 5, 2015 at 7:28
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 — ste2425
– ste2425, Commented May 13, 2015 at 14:48

Gericke · Accepted Answer · 2015-02-05 07:48:46Z

0

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

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

answered Feb 5, 2015 at 7:48

Gericke

2,2599 gold badges47 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gericke Over a year ago

I am using this fiddle as an example to compare your code - jsfiddle.net/NLw6y/32

Collectives™ on Stack Overflow

jQuery UI Tab binding with Angular JS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related