4

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

Laxmikant Dange
  • 7,606
  • 6
  • 40
  • 65
rolinger
  • 2,787
  • 1
  • 31
  • 53

1 Answers1

6

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');
DigitalMystery
  • 575
  • 1
  • 7
  • 21
  • What controller are you defining the $scope.pageFlow = {..} in ? I tried this in the Tab1 controller, and then when the form is submitted, another function within Tab1 controller resets $scope.pageFlow.disableOtherTabs = false ; - but this did not work for me. Binding the model to the tab2 as you defined above did not disable the tab icon - its still clickable. – rolinger May 27 '16 at 13:27
  • Oh, ok. I see, I have my page set up a little differently. Do you have a main tabs controller and then separate controllers for each tab? – DigitalMystery May 27 '16 at 13:31
  • I even tried and that did not work either. – rolinger May 27 '16 at 13:34
  • I just re-editted the main code and notes above to reflect how my set up is done. I am using static ion tabs templates they provided from their main site. – rolinger May 27 '16 at 13:41
  • Ok, one last question. In your app config do you have it laid out similar to this? `.state('tabs', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html" }) .state('tabs.home', { url: "/home", views: { 'home-tab': { templateUrl: "templates/home.html", controller: 'HomeTabCtrl' } } })` – DigitalMystery May 27 '16 at 13:44
  • its the standard app.js came with the ion-tabs templates. thus $stateProvider.stat('tab',{ usl: "/tab", abstract: true, templateUrl: "templates/tabs.html"}) .state('tab.tab1', {url: '/tab1',views: { 'tab-1': { templateUrl: 'templates/tab-1.html', controller: 'tab1Ctrl' } } })....etc etc – rolinger May 27 '16 at 13:48
  • LOL...yes I do. Your orig comment didn't include the app.js code so I added mine - but it looks the same. – rolinger May 27 '16 at 13:49
  • hmmmm, i think i might see where you are going with this...do I need to add/create a controller specifically for the first .state('tab', { url: "/tab", abstract: true, templateUrl: "templates/tabs.html",controller: 'tabCtrl'}) and then define $scope.pageFlow within the controller: 'tabCtrl' ? – rolinger May 27 '16 at 13:52
  • yep :-) take a look at the updated answer and let me know if that helps you out – DigitalMystery May 27 '16 at 14:02
  • Wow...Ok...it works....ALMOST. It is now disabling and enabling the tab icons...but there is a strange behavior now. I now have to click on the form 'submit' button twice before it fires. Before this code it wasn't doing this. but once it does fire, the tabs re-enable and all the form data is processed. Gotta run out to see some family, will catch up with this when I get back later this evening....but so far, this is working real close to perfection....thanks for getting me this far. what a relief. – rolinger May 27 '16 at 14:58
  • I figured out why I had to submit the form twice....an unrelated issue that was exposed when the above code was added. All works. Thanks so much for the solution - I def never would have figured that out on my own. – rolinger May 28 '16 at 16:35
  • got the above working, however have an odd behavior that you might be able to answer. Knowing the above, please also look at this post...hoping you can help me understand why its doing this: http://stackoverflow.com/questions/37554865/calling-controller-function-from-within-a-promise-in-external-js – rolinger May 31 '16 at 20:17