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

Question

我刚收到QA团队的要求,我认为这听起来很荒谬.这就是:假设您已经处于基于角度的应用程序中的"关于"状态/页面,并且当您从顶部菜单再次单击"关于"状态URL时,您希望重新加载"关于"页面.该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});不起作用,因为链接是静态的.

我目前正在尝试的最后一种方法是run通过监听'$stateChangeSuccess'事件来操纵Angular阶段的重载事件,但我不认为它会起作用,因为如果你在'about'右边点击链接就没有任何状态改变在那个州.

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

Answer 1

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

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

文档URL:UI路由器DOcs

Answer 2

你是对的,我不能让任何状态改变事件一旦处于该状态就被解雇.直到,如果有一天该功能可以通过该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 - 演示