Using ion-tab and ng-click together

ionic-v1
1

Hi All,

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, any help would be appreciated, Thanks in advance

cheers

Sam

2

there is no state defined as app.new and no template associated with it in your app.js.

.state('app.new', {
url: '/new',
views: {
  'manage-recipe': {
    templateUrl: 'templates/recipes/new.html',
    controller: 'newCtrl'
  }
}

})

Add the above.

3

@gaurav_ch, Sorry my bad, That was a mistake from my end, it should be http://localhost:8100/#/app/unpublished. I’ll update the question as well.

4

Oh I overlooked one problem in your switch case.

The index of button, returned by plugin actionsheet, starts from 1 and not 0. ng-cordova document

Returns Integer - the button index user clicked (first button is index 1).

So, for unpublished the index is 2 and not 1.

5

Here’s how you do it:

http://www.yourtechchick.com/angularjs/ionic/how-to-call-a-function-on-click-in-ion-tabs/