题 单击链接两次时,“ui-sref”不会刷新“ui-view”(其控制器不会重新运行)


首先单击状态时,拥有“ui-view”属性的div将替换为该状态的“模板”。但是,当我再次单击相同的状态时,其控制器不会重新加载。如何让此控制器再次加载?

例如,假设我有以下导航菜单:

<nav> 
    <a ui-sref="state1">State 1</a>
    <a ui-sref="state2">State 2</a>
</nav>

我的“ui-view”内容如下:

<div ui-view></div>

我的州描述如下。当我单击导航菜单上的“State1”时,我希望观察文本 "Ctrl 1 loaded" 在...上 developer console。如果是第一次,那么我会观察那个文字。但是,当我重新单击相同的链接时,控制器不会再次加载,因为我看不到文本 "Ctrl 1 loaded" 在控制台上显示两次。

myApp.config(function ($stateProvider, $urlRouterProvider){
    $stateProvider.state("state1", {
        url: "#",
        template: "<p>State 1</p>",
        controller: "Ctrl1"
      }).state("state2", {
        url: "#",
        template: "<p>State 2</p>",
        controller: "Ctrl2"
      });
});

为什么?你有什么主意吗?

这是JSFiddle 这个问题。


24
2017-08-06 08:30


起源




答案:


就像Philipp说的那样,这是因为这是ui-router的默认行为,但是如果你想在每次点击你的链接时重新加载你的控制器,你实际上可以使用 UI-S REF-OPTS 属性强制它,像这样:

<a ui-sref="state1" ui-sref-opts="{reload: true}">State 1</a>

在这里找到这个提示:

https://github.com/angular-ui/ui-router/commit/91a568454cc600aa4f34dedc8a80c9be1130b1c5

希望它可以帮助


82
2017-12-02 07:09



我怎样才能在整个申请过程中这样做? - Kumar Sambhav
非常感谢 :) - m hadadi
ui-sref-opts =“{reload:true}”对我来说也不起作用,也没有重新加载控制器。 - Ramaraj Karuppusamy
只有v0.2.5更高版本支持重载功能 github.com/angular-ui/ui-router/wiki/quick-reference#options - Jason Zhu


替代语法将转到不同的视图

<a ui-sref="state1({reload: true})">State 1</a>

在控制器上它看起来像这样。

$state.go('state1', {}, {reload: true});

注意:$ state.go的第二个参数是$ stateParams。


12
2018-01-15 21:03



ui-sref-opts 不起作用。这样做了。 - Jaxedin
多么随意,对我而言,反过来说, ui-sref-opts 工作但通过 reload: true 进入州 ui-sref 不!有这个问题的其他人我建议尝试。 - teaforchris
你使用什么版本的角度? - Rick


因为这就是ui-router的设计方式。

控制器仅在不处于相同状态时才加载。 ui-router不会重新运行控制器,也不会重新评估视图模板。 即使在多个状态下使用相同的控制器并在这些状态之间切换,控制器也不会重新运行。

如果要在视图发生更改时运行功能,则可以 听取事件,甚至放一个 ng-click 在你的 a 元件。


3
2017-08-06 08:43



感谢您的答复。如何通过ng-click再次调用该函数? - ankakusu
@ankakusu你可能不得不在控制器中设置一个监听器并从中发出一个事件 ng-click, 更多 这里。 - Philipp
ng-click事件也被压制。我将ng-click事件绑定到状态1.即使我单击该项,也不会触发ng-click事件。你可以查看 这个CodePen。 - ankakusu
@ankakusu Ctrl1仅控制下面的元素 ui-view, click 在范围上定义 Ctrl1 只有在视图中调用if时才会触发。 这是一个带有导航栏控制器的示例。如果您使用此功能,请使用范围内的消息传递 $emit (点击)和 $on ( 在里面 Ctrl1 ),你可以收到活动 Ctrl1的范围。 - Philipp
<a ui-sref="home"ui-sref-opts="{reload: true,notify: true}" ng-click="createNewHome()">创建新主页</a>它无法正常工作。请建议我,我们应该改变它... - Shivendra Prakash Shukla


只需使用下面的代码

$stateProvider.
  state('myPage', {
    url: '/',
    cache: false // add this line

1
2018-06-06 10:46