如何动态启用禁用的离子表？

Question

这应该很简单，但是def不是。

在我的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，而没有任何用于主“ tabs”页面的控制器。

在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');