AngularJS 和 Ionic - 根据在不同控制器中单击侧边菜单更改内容

Question

好的，我遇到了这样一种情况，我想单击一个侧边菜单项来更改同一主视图中的内容。

这是我的一些 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>

这是食谱状态（在 recipes.html 模板中）：

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

和食谱控制器：

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

一切正常，因为它使用 $recipes 工厂从服务器获取数据并在页面加载时显示（即当 RecipesCtrl 启动时，因为它是状态控制器）

我的问题是，当我单击菜单项特色食谱时，我希望 $scope.recipes 从列出所有食谱更改为仅列出特色列表，但是因为 showFeaturedRecipes() 的函数在AppCtrl，它不会更改相同的 $scope.recipes 值：

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

所以基本上现在我在侧面菜单中有一个 $scope.recipes，在实际页面内容中有一个，但它们没有链接。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

最好的方法是对不同的链接使用不同的路由。所以你的菜单将是：

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

我认为菜谱和类别必须分开 view/controllers 并且特色菜谱只是所有菜谱的过滤器。

AngularJS 和 Ionic - 根据在不同控制器中单击侧边菜单更改内容

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

factory

angularjs

angularjs-scope

ionic