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事件来操纵Angular '$stateChangeSuccess'阶段的重载事件，但我不认为它会起作用，因为没有状态如果您在该州处于正确状态时点击'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 - 演示

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

2 个答案: