AngularJS with ui.router：点击同一状态链接时重新加载页面

Question

我刚从我们的QA团队获得了一个要求，我觉得这听起来很荒谬。这里是：假设你已经在基于角度的应用中的'about'状态/页面上，并且当你从顶部菜单中再次点击'about'状态url时，你想要重新加载'about'页面。 about页面不会从任何地方获取数据，顺便说一下，重新加载仅仅等同于眨眼。

对于我的角度应用程序状态的配置是这样的：

.state('about', { 
    url: '/about', 
    templateUrl: '/path/to/about.html', 
    controller: 'aboutCtrl as aboutView' 
}); 

而在顶部的菜单，我们有指向这个状态的链接：

<a ui-sref="about">About</a> 

我已经尝试了很多东西让这个工作：单击链接触发重新加载相同的状态。

像$state.go('about', {}, {reload: true});或$state.transitionTo('about', {}, {reload: true});这样的东西不起作用，因为链接是静态的。

目前我正在一个不得已是通过听'$stateChangeSuccess'事件来操作的角度在run阶段重装的事情，但我不认为它会工作，因为如果你点击有没有状态变化都'about'链接，而你正处于该状态。

有什么办法可以解决这个问题吗？谢谢

Answer 1

有一个选项属性称为UI-S REF-选择采用自带的UI路由器。我面临同样的问题，并解决了它。

如：<a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>

文件网址：UI Router DOcs

Answer 2

你是对的，我不能得到任何state change events要么一旦已经在那个状态下触发。直到有一天，如果该功能可以通过该api使用，这里有一个半简单的解决方案。我们可以利用ng-click并使用一些愚蠢的逻辑来安抚QA（在你的情况下）。另外，我不知道你的控制器的实现，所以为了简单和可见性，我在本例中将我的建议放在$rootScope的.run中，但是如果你愿意，可以相应地集成。观察下面的例子...

<a ui-sref="about" ng-click="sillyQA()">About</a> 

---

.run(['$rootScope', '$state', function($rootScope, $state) { 

    $rootScope.sillyQA = function() { 
     if($state.current.name === 'about') { 
      $state.go('about', {}, { reload: true }); 
     } 
    } 

    // -- just to see our about => about state 'change' 
    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ 
     console.log('toState: ' + toState.name); 
     console.log('fromState: ' + (fromState.name || 'Just got there! click again!')); 
    }) 
}]); 

JSFiddle Link - 演示