Question

我有一个带有主页的角应用程序，显示了一系列内容。每件东西都有一个类型。在导航中，存在与每种事物类型相对应的选择器。单击其中一个选择器会使家庭控制器将显示的内容过滤为所选类型的内容。因此，我看到选择器对应于主页的状态。

现在，我想将每个状态映射到url路由：myapp.com/home以默认（未筛选）状态加载主页，myapp.com/home/foo打开主页{{1已激活类型选择器，并从那里切换到foo切换到myapp.com/home/bar - 已过滤状态 而不重新加载页面 。

这是最后一点 - 触发“状态”更改而不重新加载页面，这一点特别棘手。关于这个主题有很多SO /论坛问题，但没有一个问题很突出，所以我想知道我是否以错误的方式思考这个问题：我是否应该将这些“状态”视为状态？有更简单的方法吗？

此外，我愿意使用bar或ngRoute - 是否有任何关于其中一个可能使其更容易实现的内容？

Answer 1

使用ui-router，您可以这样处理：

$stateProvider
  .state('home', {
    url: "/home",
    controller: "HomeController",
    templateUrl: "home.html"
    // .. other options if required
  })
  .state('home.filtered', {
    url: "/{filter}",
    controller: "HomeController",
    templateUrl: "home.html"
    // .. other options if required
  })

这会将过滤状态创建为主状态的子状态，这意味着您可以将过滤状态的URL视为/home/{filter}。其中filter是一个状态参数，然后可以使用$stateParams访问。

由于您不想切换视图，因此您需要将$ stateParams注入控制器，观看$stateParams.filter，并按照您的意愿做出反应。

$scope.$watch(function () { return $stateParams.filter }, function (newVal, oldVal) {
    // handle it
});

我正确使用状态吗？

1 个答案: