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?
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();
});
}
}
});