1

我在使用 AngularJS 生成动态选项卡（jquery-ui）时遇到问题。

我创建了一个指令来调用 div 标签上的 Tabs(jQuery-UI) 初始化，该标签具有使用 ng-repeat 生成的 ul > li> a 元素。

我认为问题出在标签初始化的某个地方没有与模型绑定同步，并且我在标签上得到了一个奇怪的行为。我认为这可能会发生，因为在模型“更改”之前选项卡的初始化发生了，因为我用 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("...");
        }
    ...

有谁知道如何在更改模型后强制重新初始化选项卡？

4

1 回答 1

1

尝试像这样在指令中“观察”您的模型：

myApp.directive('juiTabs', function () {
    return function postLink(scope, iElement, iAttrs) {
        scope.$watch(iAttrs.ngModel, function (newValue) {
            jQuery(function () {
                $(iElement).tabs();
            });
        }
    }
});
于 2013-09-21T17:16:16.977 回答