如何动态启用禁用的 ion-tab？

Question

这应该很简单，但事实并非如此。

在我的 html 中，我有 4 个选项卡，其中一个是默认选项卡，另外 3 个是手动禁用的 ion-tab...我的选项卡是标准离子模板（静态）选项卡：

<ion-tab class="tabs-icon-top tabs-color-active-positive">    
    <ion-tab id="tab1" disabled="pageFlow.disableOtherTabs" ...>
        <ion-nav-view name="tab1"></ion-nav-view>
    </ion-tab>
    <ion-tab id="tab2" disabled="pageFlow.disableOtherTabs" title="Tab2" icon-off='ion-off' icon-on='ion-on' href="#/tab/tab2">
    <ion-tab id="tab3" disabled="true" ...>
    <ion-tab id="tab4" disabled="true" ...>
</ion-tab>

这工作正常...选项卡图标 2/3/4 可见但显示为灰色且无法单击。然后，我只有用于 tab1、tab2、tab3、tab4 的 .controllers，但没有用于任何类型的主“选项卡”页面的控制器。

在 tab1 中是一个表单，当表单被提交时，它会在 .controller 中进行评估，并且基于某些条件应该“启用”3 个禁用的选项卡。

我尝试了很多组合来启用它们，这样它们就不会变灰并且现在可以点击 - 但没有任何效果。

我尝试过的各种事情：

document.getElementById('tab2').disabled = false ;
angular.element(document.getElementById('#tab2').disabled = false ;
$ionicTabDelegate.select(1).disabled = false ; // this actually executes the tab1 controller/services but does not enable the icon - still can't click on it.

...天知道还有多少其他组合。但没有任何工作。我什至定义了“delegate-handle”和“ng-attr-id”来尝试访问 ion-tab 属性 - 但同样，没有任何效果。

我的标签已定义

Answer 1

尝试在您的控制器中创建一个这样的模型，您将在 HTML 中绑定到该模型以动态更改渲染：

$scope.pageFlow = {
   disableOtherTabs : true
}

然后当您提交表单时更改值：

$scope.pageFlow.disableOtherTabs = false;

最后，将模型绑定到您的选项卡：

<ion-tab id="tab2" disabled="pageFlow.disableOtherTabs" title="Tab2" icon-off='ion-off' icon-on='ion-on' href="#/tab/tab2">

如果您希望所有选项卡都启用或添加额外属性来控制各个选项卡，请在所有选项卡上使用相同的属性。

更新

在你的 app.js 中添加一个控制器到你的基本标签：

.state('tab', {
        url: "/tab",
        abstract: true,
        templateUrl: "templates/tabs.html",
        controller: "tabsController"
    })

显然将它注入到您的主 html 页面中，然后在导航到具有您的表单的“tab.tab1”之前调用此控制器。在此控制器中，从上面定义您的模型。但是，您仍然需要多一步。

在您的新控制器上添加如下内容：

    var refreshFinalizer = $rootScope.$on('updateTabsRefresh', function (event, data) {
       $scope.pageFlow.disableOtherTabs = false;
    });
    $scope.$on('$destroy', function () {
       refreshFinalizer ();
    });

选中表单后，在您的 tab1 上将广播添加到侦听器：

 $rootScope.$broadcast('updateTabsRefresh');