AngularJS and Ionic - changing content based on side menu click in different controller

Question

Ok so I have a situation where I want a click of a side menu item to change the content within the same main view.

Here's a bit of my menu.html:

<ion-item menu-close href="#/app/recipes" ng-click="showFeaturedRecipes()">
  Featured Recipes
</ion-item>
<ion-item menu-close href="#/app/recipes" ng-click="showRecipeCategories()">
  Recipe Categories
</ion-item>
<ion-item menu-close href="#/app/recipes" ng-click="showAllRecipes()">
  All Recipes
</ion-item>

Here's the recipes state (in recipes.html template):

   <div class="list card" ng-repeat="recipe in recipes">
    ...
   </div>

And the recipes controller:

.controller('RecipesCtrl', function($scope, $http, $recipes) {
  $recipes.getRecipes().then(function(data){
    $scope.recipes = data;
  });
})

That all works fine, as it uses the $recipes factory to get data from the server and show on page load (i.e. when RecipesCtrl is initiated as it's the state controller)

My issue is that when I click the menu item Featured Recipes, I want the $scope.recipes to change from listing all recipes to just the featured list, but as the function for showFeaturedRecipes() is in the AppCtrl, it doesnt change the same $scope.recipes value:

.controller('AppCtrl', function($scope, $recipes) {
     ...
      $scope.showFeaturedRecipes = function(){
        $scope.recipes = $recipes.getFeaturedRecipes();
      }
...
})

So essentially at the moment I have a $scope.recipes in the side menu, and one in the actual page content, but they aren't linked.

Any help would be appreciated.

Thanks

Kostya Shkryob Kostya Shkryob · Accepted Answer · 2015-12-10T20:52:38

The best way is to use different routings for different links. So your menu will be:

<ion-item menu-close href="#/app/recipes?featured=1">
  Featured Recipes
</ion-item>
<ion-item menu-close href="#/app/categories">
  Recipe Categories
</ion-item>
<ion-item menu-close href="#/app/recipes">
  All Recipes
</ion-item>

I believe recipes and categories must have separate view/controllers and featured recipes is just a filter for all recipes.

AngularJS and Ionic - changing content based on side menu click in different controller

1 Answers