angular ui-router:如何在路径参数更改时重新加载状态,但在查询参数更改时不重新加载?

时间:2014-07-08 00:49:29

标签: javascript angularjs angular-ui angular-ui-router

例如,我希望导航中的此更改能够重新加载状态:

  • #/detail/1
  • #/detail/2

但我不希望此导航重新加载状态:

  • #/detail/1?search=blah
  • #/detail/1?search=huzzah

根据ui-router文档,设置reloadOnSearch: false应该可以实现此目的,但请尝试下面的插件。 reloadOnSearch === false时,更改路径参数并不会重新加载状态,即使文档说它应该。

Plunkr:http://run.plnkr.co/ZPy9uabYlkMilwdS/#/param

2 个答案:

答案 0 :(得分:31)

我已经创建了plunker,证明ui-router功能reloadOnSearch正在记录here

  

reloadOnSearch:

     

布尔(默认为true)。如果false不会因为搜索/查询参数更改而重新触发相同的状态。在您不想触发重新加载的情况下修改$ location.search()时非常有用。

所以,这就是说,如果我们确实有这样的状态

.state('index.detail', {
      url: '/detail/:id',
      reloadOnSearch : false,
      ...
    })

导航到

  • ui-sref="index.detail({id:1})"

将加载此状态,同时导航到

  • ui-sref="index.detail({id:any-other-id})"

什么都不做。但!如果我们要引入新的(例如兄弟)状态定义如下:

.state('index.other', {
      url: '/other/:id',
      reloadOnSearch : false,
      ...
    })

导航到下面的序列将始终重新触发状态重新加载,不是因为参数更改,而是因为状态更改

  1. <a href="#/index/detail/1" ...
  2. <a href="#/index/other/1" ... // will relaod
  3. <a href="#/index/detail/2" ... // because the state
  4. <a href="#/index/other/2" ... // is changing
  5. 查看所有动作here ...

答案 1 :(得分:2)

这是UI-Router中的一个错误,已在0.2.15版中修复:

https://github.com/angular-ui/ui-router/releases

升级到最新版本将解决问题