AngularJSでの動的タブの生成(jquery-ui)に問題があります。
ng-repeatで生成される要素がul>li>であるdivタグでTabs(jQuery-UI)初期化を呼び出すディレクティブを作成しました。
タブの初期化がモデルバインディングと同期しておらず、タブで奇妙な動作が発生することが問題だと思います。モデルにajaxをロードしているため、モデルが「変更」される前にタブの初期化が発生し、タブウィジェットの「再初期化」に対処する方法がわからないために発生する可能性があると思います。
私のディレクティブは次のようになります。
myApp.directive('juiTabs', function () {
return function postLink(scope, iElement, iAttrs) {
jQuery(function () {
$(iElement).tabs();
});
}
});
私のコントローラー
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("...");
}
...
モデルが変更された後、タブの再初期化を強制する方法を誰かが知っていますか?