带ui的AngularJS.路由器:点击相同状态链接时重新加载页面

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

本文关键字：新加载 加载 链接 状态 路由器 AngularJS ui      更新时间：2023-09-26

我刚收到QA团队的请求，我觉得这听起来很荒谬。假设在基于angular的应用中，你已经在"about"状态/页面上，当你再次从顶部菜单点击"about"状态url时，你希望"about"页面重新加载。about页不从任何地方获取数据，顺便说一下，重新加载只是相当于一次眨眼。

我的angular应用中的state配置是这样的:

.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'链接而您在该状态上正确，则根本没有状态变化。

有没有办法解决这个问题?由于

UI路由器中有一个选项属性叫做 UI -sref-opts。我遇到了同样的问题，它解决了它。

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

Docs URL: UI Router Docs

你是对的，我不能得到任何状态变化事件触发一旦已经在那个状态。在此之前，如果有一天该功能可以通过api使用，这里有一个半hack的解决方案。我们可以利用ng-click并使用一些愚蠢的逻辑来安抚QA(在你的情况下)。此外，我不知道你的控制器实现，所以我把我的建议放在.run的$rootScope在这个例子中，为了简单和可见性，但相应的集成，如果你选择这样做。观察下面的例子…

<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 - demo

相关文章：