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>

我相信食谱和类别必须有单独的视图/控制器，而特色食谱只是所有食谱的过滤器。

AngularJS和Ionic - 根据侧面菜单更改内容，单击不同的控制器

1 个答案: