AngularJS 和 ui.router：点击相同状态时重新加载页面 link

Question

我刚收到我们 QA 团队的请求，我觉得这听起来很荒谬。开始了：假设您已经在基于 angular 的应用程序中处于 'about' state/page，并且当您再次单击 'about' 状态 url 时顶部菜单，您希望 'about' 页面重新加载。 about 页面不会从任何地方获取数据，顺便说一下，重新加载相当于 blink.

我的 angular 应用程序中的状态配置是这样的：

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

并且在顶部菜单中，我们有一个 link 指向此状态：

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

我已经尝试了很多方法来让它工作：单击 link 触发相同状态的重新加载。

$state.go('about', {}, {reload: true}); 或 $state.transitionTo('about', {}, {reload: true}); 之类的东西不起作用，因为 link 是静态的。

我目前正在尝试的最后一个方法是通过监听 '$stateChangeSuccess' 事件来操纵 Angular 的 run 阶段的重新加载，但我认为它不会工作，因为如果您在该状态下单击 'about' link，则状态根本没有变化。

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

Answer 1

你是对的，一旦处于那种状态，我就无法让任何 state change events 开火。直到，如果有一天该功能可以通过 api 使用，这里有一个半 hacky 的解决方案。我们可以利用 ng-click 并使用一些愚蠢的逻辑来安抚 QA（在您的情况下）。另外，我不知道你的控制器实现，所以为了简单和可见性，我在这个例子中把我的建议放在 $rootScope in .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 - 演示

Answer 2

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

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

文档 URL : UI Router DOcs

AngularJS 和 ui.router：点击相同状态时重新加载页面 link

AngularJS with ui.router: reload page when clicking the same state link

html

javascript

reload

angularjs

angular-ui-router