angularjs - 如何动态启用禁用的 ionic 选项卡？

Question

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

在我的 html 中，我有 4 个选项卡，其中一个是默认选项卡，另外 3 个是手动禁用的 ion-tab ...我的选项卡是标准 ionic 模板(静态)选项卡:

<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，但没有用于任何类型的主“选项卡”页面的 Controller 。

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

尝试在您的 Controller 中创建一个这样的模型，您将在 HTML 中绑定(bind)到该模型以动态更改渲染:

$scope.pageFlow = {
   disableOtherTabs : true
}

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

$scope.pageFlow.disableOtherTabs = false;

最后，将模型绑定(bind)到您的选项卡:

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

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

更新

在您的 app.js 中，将 Controller 添加到您的基本选项卡:

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

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

在您的新 Controller 上添加如下内容:

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

检查表单后，在您的 tab1 上将广播添加到监听器:

 $rootScope.$broadcast('updateTabsRefresh');