how to dynamically enable a disabled ion-tab?

问题:

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

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>

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.

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.

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.

...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.

My tabs are define

回答1:

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;

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.

UPDATED

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

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

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 ();
    });

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

 $rootScope.$broadcast('updateTabsRefresh');