AngularJS with ui.router：點擊同一狀態鏈接時重新加載頁面

我剛從我們的QA團隊獲得了一個要求，我覺得這聽起來很荒謬。這裏是：假設你已經在基於角度的應用中的'about'狀態/頁面上，並且當你從頂部菜單中再次點擊'about'狀態url時，你想要重新加載'about'頁面。 about頁面不會從任何地方獲取數據，順便說一下，重新加載僅僅等同於眨眼。AngularJS with ui.router：點擊同一狀態鏈接時重新加載頁面

對於我的角度應用程序狀態的配置是這樣的：

.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'事件來操作的角度在run階段重裝的事情，但我不認爲它會工作，因爲如果你點擊有沒有狀態變化都'about'鏈接，而你正處於該狀態。

有什麼辦法可以解決這個問題嗎？謝謝

來源

2015-09-24 TonyGW

「我剛剛從我們的QA團隊，我認爲這聽起來很可笑的請求」 - 讓我很快樂TY – scniro

高興你有一個很好笑。我確實認爲這是一個荒謬的要求，認爲用ui.router不可能做到。我正在等一些專家來啓發我。謝謝 – TonyGW

我不認爲重新加載關於頁面（我假設它是靜態的）是一個很好的方式去出於幾個原因 - 你的應用程序應該只是告訴用戶他們已經在那個頁面上。一個很好的例子是Material Design的動畫，當你反覆點擊同一個選項卡時 - https://material.angularjs.org/latest/#/demo/material.components。標籤 – JaKXz

有一個選項屬性稱爲UI-S REF-選擇採用自帶的UI路由器。我面臨同樣的問題，並解決了它。

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

文件網址：UI Router DOcs

來源

2016-01-21 10:35:31 Siv

這對我有用，謝謝！ – ChrisDevWard

針對此問題的最佳解決方案，謝謝！ –

你是對的，我不能得到任何state change events要麼一旦已經在那個狀態下觸發。直到有一天，如果該功能可以通過該api使用，這裏有一個半簡單的解決方案。我們可以利用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 - 演示

來源

2015-09-24 19:48:24 scniro

謝謝，很好解釋！當我收到QA的請求時，我更加惱火。因爲如果需要重新加載，用戶可以隨時刷新瀏覽器窗口。我沒有看到再點擊相同鏈接來重新加載它的一點。 LOL – TonyGW

@TonyGW我聽說你來自哪裏！我只能想象一個情況，就是飼料不斷變化，比如SO上的最新問題。如果我想「刷新」Feed，而不是明確地刷新瀏覽器，我可以整天點擊徽標。無論哪種方式快樂的編碼，我很高興這是能夠幫助:) – scniro

其實，該頁面僅包含用戶輸入的表單。它不會從任何地方收到任何數據。 QA人有時候會讓我瘋狂...... – TonyGW

AngularJS with ui.router：點擊同一狀態鏈接時重新加載頁面

回答

相關問題