CODEWITHSUNDEEP
angularjsionic-frameworkhybrid-mobile-app
sameera207
sameera207

Reputation: 16629

Using ion-tab and ng-click together

I'm trying to get <ion-tab> working with ng-click, The problem is, I get the ActionSheet to pick the option. However the page is not loading,

Following is my code

#tabs.html
<ion-tab title="Recipe" icon-off="ion-pizza" icon-on="ion-pizza assertive" ng-click="recipeAction()">
  <ion-nav-view name="manage-recipe"></ion-nav-view>
</ion-tab>

#click event
$scope.recipeAction = function(){
    $ionicActionSheet.show({
      buttons: [
        { text: 'Add new recipe' },
        { text: 'Draft Recipes' },
      ],
      titleText: 'Manage your recipes',
      cancelText: 'Cancel',
      buttonClicked: function(index){
        var path = '';
        switch(index){
          case 0:
           path = 'app.new';
           break;
          case 1:
           path = 'app.unpublished';
           break;
        }
        $state.go(path);
      }
    });
  }

#app.js
  .state('app.unpublished', {
    url: '/unpublished',
    views: {
      'manage-recipe': {
        templateUrl: 'templates/recipes/unpublished.html',
        controller: 'unpublishedCtrl'
      }
    }
  })

When I click the tab, it loads the ActionSheet and the issue is when I select an options , say 'Draft Recipes', it doesnt load the new_recipe page to the tab.

However it changes the URL to http://localhost:8100/#/app/unpublished (which is correct and I have a html file with the same name)

What could I be missing here?

Upvotes: 2

Views: 4876

Answers (4)

alex351
alex351

Reputation: 1964

In Ionic 2.x, it is actually (ionSelect):

Instead of:

on-select="recipeAction()"

Try:

(ionSelect)="recipeAction()"

Upvotes: 0

Kamal Kumar
Kamal Kumar

Reputation: 3763

you can use on-select event at place of ng-click for ion-tabs change event

<ion-tab title="Content 1" on-select="doSomeForcontent1()">
    Content 1
</ion-tab>


<ion-tab title="Content 2" on-select="doSomeForcontent2()">
    Content 2
</ion-tab>

Upvotes: 1

huxiaodan
huxiaodan

Reputation: 1

As long as the app.js file inside the tabs.html to add the corresponding route to use ng-click method to switch the html corresponding js name can app.js

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

tabs.html

<ion-tab title="预约" icon-off="ion-ios-time-outline" icon-on="ion-ios-time"  ng-click="switchReserve()">
    <ion-nav-view name="reserve"></ion-nav-view>
  </ion-tab>

reserve.js

systecApp.controller('reserveCtrl',function($scope){
    /*跳转至预约选项卡*/
  $scope.switchReserve = function(){
    .......
    $state.go('tab.reserve',{'meeting': null});
  };
})

Upvotes: 0

systemdebt
systemdebt

Reputation: 4941

You don't use ng-click with ion-tabs. Two just don't work together nicely. Here's a workaround: how-to-call-a-function-on-click-in-ion-tabs

Upvotes: 0

Related Questions