Question

我正在使用ng-repeat动态创建我的tabset。选项卡内是动态表单。当用户单击选项卡时，控制器调用$ state.go（）并加载下一个表单的数据。我们最近要求检查表单是否有未保存的更改并提示用户。我发现https://github.com/facultymatt/angular-unsavedChanges可以很好地完成工作。我遇到的问题是当用户点击取消时，所选标签保留在他们点击的新标签上。

我的标签创建如下：

 <div tabset style="align-content: center;">
      <div tab ng-repeat="tab in vm.Tabs" heading="{{ tab.Name }}" active="$first" select="onTabSelect(tab.RecordID)">
      </div>
 </div>

在控制器中选择下一个标签时：

$scope.onTabSelect = function (tabId) {
        $state.go('app.Tabs.TabRender', {
            recordID: tabId,
        });
    };

当用户单击取消时，我将unsavedChanges服务修改为广播，并且可以在我的控制器中正确捕获它。我唯一的问题是如何将选定的标签重置回原始标签？

Answer 1

通过向每个选项卡对象添加活动属性并根据用户是否重定向在控制器中设置该属性来解决此问题。

<div tab ng-repeat="tab in vm.Tabs" heading="{{ tab.Name }}" active="tab.Active" select="onTabSelect(tab.RecordID)">

并在控制器中：

    function setActiveTab(id) {
        _.each(vm.Tabs, function (tab) {
            if (tab.RecordID === id)
                tab.active = true;
            else
                tab.active = false;
        });
    }

    $scope.$on("redirectCancelled", function () {
        setActiveTab(currentTab);
    });

    $scope.$on("resetResettables", function () {
        currentTab = redirectTab;
    });

    $scope.onTabSelect = function (tabId) {
        redirectTab = tabId;
        setActiveTab(tabId);

        $state.go('app.Tabs.TabRender', {
            recordID: tabId,
        });            
    };

角度取消选项卡单击

1 个答案: