带有ui.router的AngularJS：单击相同状态链接时重新加载页面

Question

我刚收到我们的 QA 团队的请求，我认为这听起来很荒谬。在这里：假设您已经在基于角度的应用程序中的“关于”状态/页面上，并且当您再次从顶部菜单中单击“关于”状态 url 时，您希望“关于”页面重新加载。 about 页面不会从任何地方获取数据，顺便说一下，重新加载就相当于眨眼。

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

.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' 事件来操纵 Angular 的run 阶段中​​的重新加载事情，但我认为它不会起作用，因为如果当您处于该状态时，您点击'about' 链接。

有没有办法解决这个问题？谢谢

Answer 1

UI 路由器附带了一个名为 ui-sref-opts 的选项属性。我遇到了同样的问题，它解决了。

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

文档网址：UI Router DOcs

Answer 2

你是对的，我无法让任何state change events 在已经处于该状态时触发。直到，如果有一天该功能可以通过该 api 使用，这里有一个半hacky 的解决方案。我们可以利用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 - 演示