Question

这应该是非常直接的，但它不是。

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

<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个禁用的选项卡。

我已经尝试了很多种组合来让它们启用，因此它们不会显示为灰色，现在可以点击 - 但是NOTHING正在工作。

我尝试了各种各样的事情：

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

如何动态启用已禁用的离子标签？

1 个答案: