javascript 带有 ui.router 的 AngularJS：单击相同状态链接时重新加载页面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32769366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS with ui.router: reload page when clicking the same state link
提问by TonyGW
I just got a request from our QA team, which I think sounds ridiculous. Here it goes: suppose you are already on the 'about' state/page in the angular-based app, and when you click on the 'about' state url again from the top menu, you want the 'about' page to reload. The aboutpage does not fetch data from anywhere, by the way, a reload is simply equivalent to a blink.
我刚收到我们 QA 团队的请求，我认为这听起来很荒谬。它是这样的：假设您已经在基于 angular 的应用程序中的“关于”状态/页面上，并且当您再次从顶部菜单中单击“关于”状态 URL 时，您希望重新加载“关于”页面。该about页面不会从任何地方获取数据，顺便说一下，重新加载就相当于眨眼。
For the state config in my angular app is like this:
对于我的 angular 应用程序中的状态配置是这样的：
.state('about', {
url: '/about',
templateUrl: '/path/to/about.html',
controller: 'aboutCtrl as aboutView'
});
And in the top menus, we have a link pointing to this state:
在顶部菜单中，我们有一个指向此状态的链接：
<a ui-sref="about">About</a>
I have tried many things to get this to work: clicking the link triggers the reload of the same state.
我已经尝试了很多方法来使它起作用：单击链接会触发相同状态的重新加载。
Things like $state.go('about', {}, {reload: true});or $state.transitionTo('about', {}, {reload: true});don't work, because the links are static.
喜欢$state.go('about', {}, {reload: true});或$state.transitionTo('about', {}, {reload: true});不工作的事情，因为链接是静态的。
One last resort I am currently trying is to manipulate the reload thing in the runphase of Angular by listening to '$stateChangeSuccess'event, but I don't think it will work, because there's no state change at all if you click on the 'about'link while you are right on that state.
我目前正在尝试的最后一种方法是run通过监听'$stateChangeSuccess'事件来操纵Angular 阶段的重新加载，但我认为它不会起作用，因为如果您在'about'正确的情况下单击链接，则根本没有状态变化在那个状态。
Is there any ways to work around this? Thanks
有没有办法解决这个问题？谢谢
回答by Siv
There is an option attribute called ui-sref-optsthat comes with the UI Router. I faced the same problem and it solved it.
UI 路由器附带了一个名为ui-sref-opts的选项属性。我遇到了同样的问题，它解决了它。
Eg: <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
例如： <a ui-sref="home" ui-sref-opts="{reload: true}">Home</a>
Docs URL : UI Router DOcs
文档 URL：UI 路由器文档
回答by scniro
You're right, I can't get any state change eventsto fire either once already in that state. Until, and if that functionality becomes available to use through that api someday, here's a semi-hacky solution for this. We can just leverage ng-clickand use some silly logic to appease QA (in your case). Also, I don't know your controller implementation, so I placed my suggestion on $rootScopein .runin this example for simplicity and visibility, but integrate accordingly if you choose to do so. Observe the following example...
你是对的，一旦处于该状态，我就无法触发任何状态更改事件。直到有一天，如果该功能可以通过该 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- demo
JSFiddle 链接- 演示
