Question

我是个有角度的新手所以请耐心等待。

我一直试图这样做一段时间，但无法弄清楚如何做到这一点。

我有三个（1个抽象父级）状态，如下：

.state('recipes', {
    url: '/recipes',
    abstract: true,
    template: '<ui-view/>'
  })
  .state('recipes.listing', {
    url: '/listing',
    templateUrl: '/modules/recipes/client/views/recipes.listing.html',
    controller: 'RecipesController',
    controllerAs: 'vm',
    data: {
      pageTitle: 'Recipes'
    }
  })
  .state('recipes.details', {
    url: '/details',
    templateUrl: '/modules/recipes/client/views/recipes.details.html',
    controller: 'RecipesDetailsController',
    controllerAs: 'vm'
  });

在“列表”页面中，用户可以选择一个列表。从列表中选择后，他们可以通过$ state.go（）访问“详细信息”页面。现在，当他们按下“后退”按钮时，他们会回到列表页面，但他们查询的所有数据现在都消失了。我能想到的唯一方法是将页面转换为视图并将它们插入到1状态，然后显示/隐藏它们，但我觉得这不是Angular方式。

提前致谢。

Answer 1

我建议以RESTfull方式使用路由。例如，您的列表页面路径可以是：

.state('recipes', {
    url: '/recipes',
    templateUrl: '/modules/recipes/client/views/recipes.listing.html',
    controller: 'RecipesController',
    controllerAs: 'vm',
    data: {
      pageTitle: 'Recipes'
    }
})

详情路线：

  .state('recipes.details', {
    url: '/recipes/:recipeID/details',
    templateUrl: '/modules/recipes/client/views/recipe.details.html',
    controller: 'RecipesDetailsController',
    controllerAs: 'vm'
  });

在您的商家信息页面中，您可以添加基于ID的链接以访问每个商品的详细信息页面。如果你使用桌子，你的桌子应该是这样的：

<tbody>
    <tr ng-repeat= "recipe in recipes">
        <td><a ng-href="#!/recipes/{{::recipe._id}}/details"></a></td>
    </tr>
</tbody>

访问“详细信息”页面时，在“列表”页面上保留数据

1 个答案: