Issue with jQueryUI Tabs + AngularJS

Question

i'm having a problem with dynamic tabs generation(jquery-ui) with AngularJS.

I've created a directive to invoke the Tabs(jQuery-UI) initialization on a div tag that have the ul > li> a elements being generated with ng-repeat.

i think the problem is somewhere on initialization of tabs is not syncronized with the model binding and i get a strange behavior on tabs. i think it could happen because the initilalization of tabs ocurrs before the model was "changed" because im loading the model with ajax, and i don't know how to deal with a "re-initialization" of tabs widget.

my directive Looks like this:

myApp.directive('juiTabs', function () {
    return function postLink(scope, iElement, iAttrs) {
        jQuery(function () {
            $(iElement).tabs();
        });

    }
});

My Controller

function MyCtrl($scope, $locale, $routeParams, $http) {

    $scope.DataSource = null;

    $http({
        url: "/api/product/1",
        method: "GET",
        data: { "foo": "bar" }
    }).success(function (data, status, headers, config) {

        if (data.isSucess) {
            $scope.DataSource = data.Data;
        }
        else {
            NotifyError("...");
        }
    ...

Does anyone have some idea how can i force the re-initialization of tabs after my model was changed?

I wouldn't even use JQuery UI tabs. You could just make your own with Angular and style them with JQuery UI's css. — Ben Lesh
– Ben Lesh, Commented Oct 24, 2012 at 17:56
I suspect they can't work together because both jquery-ui tabs and Angularjs work by intercepting hash tags — James A Mohler
– James A Mohler, Commented Sep 21, 2013 at 16:13

Thomas Pons · Accepted Answer · 2013-09-21 17:16:16Z

1

+50

Try to "watch" your model in your directive like that :

myApp.directive('juiTabs', function () {
    return function postLink(scope, iElement, iAttrs) {
        scope.$watch(iAttrs.ngModel, function (newValue) {
            jQuery(function () {
                $(iElement).tabs();
            });
        }
    }
});

answered Sep 21, 2013 at 17:16

Thomas Pons

7,7293 gold badges40 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Issue with jQueryUI Tabs + AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related