如何动态启用禁用的离子标签？ [英] how to dynamically enable a disabled ion-tab?

问题描述

这应该是非常简单的，但它不是def。

This should be pretty straight forward, but it def is not.

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

In my html i have 4 tabs, one of which is the default and the other 3 are manually disabled the ion-tab...my tabs are the standard ion template (static) tabs:

<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，但没有任何类型的主标签页面的控制器。

This is working correctly...Tabs icons 2/3/4 visible but are greyed out and cannot be clicked. I then only have .controllers for tab1, tab2, tab3, tab4, but no controller for any kind of master "tabs" page.

在tab1中是一个表单，当提交表单，在.controller中进行评估，并根据某些条件设置启用3个禁用选项卡。

In tab1 is a form, when the form is submitted, it is evaluated in the .controller and based on certain conditions is supposed to "enable" the 3 disabled tabs.

我尝试了很多种组合来让它们启用，这样它们就不会变灰了，现在可以点击了 - 但是NOTHING正在工作。

I have tried many many combinations to get them to enable so they won't be greyed out and can now be clicked - but NOTHING is working.

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

various things I have tried:

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属性 - 但同样，没有任何工作。

...and lord knows how many other combinations. But nothing is working. I have even defined "delegate-handle" and "ng-attr-id" to try and gain access to the ion-tab attributes - but again, nothing is working.

我的标签是定义

推荐答案

尝试在你的控制器中创建这样的模型在HTML中绑定以动态更改呈现：

Try creating a model like this in your controller which you will bind to in your HTML to dynamically change the rendering:

$scope.pageFlow = {
   disableOtherTabs : true
}

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

Then when you submit your form change the value:

$scope.pageFlow.disableOtherTabs = false;

最后，将模型绑定到您r tabs：

Finally, bind the model to your tabs:

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

如果要全部启用它们，请在所有选项卡上使用相同的属性，或者添加额外的属性控制单个标签。

Use the same property on all the tabs if you want them all to be enabled or add extra properties to control individual tabs.

更新

在你的app.js中添加一个控制器到你的基础选项卡：

In your app.js add a controller to your base tab:

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

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

Obviously inject it into your main html page and then this controller should be called before your navigate to "tab.tab1" which has your form. In this controller define your model from above. You will still need one more step however.

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

On your new controller add something like:

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

在表单选中后，在tab1上将广播添加到收听者：

On your tab1 after the form is checked add the broadcast to the listener:

 $rootScope.$broadcast('updateTabsRefresh');

这篇关于如何动态启用禁用的离子标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！