AngularJS mit ui.router: Seite neu laden, wenn man auf denselben Statuslink klickt

Question

Ich habe gerade eine Anfrage von unserem QA-Team bekommen, was ich lächerlich finde. Hier geht es: Angenommen, Sie befinden sich bereits in der eckigen App auf dem Status 'ungefähr' und wenn Sie im oberen Menü erneut auf die Status-URL 'about' klicken, möchten Sie, dass die Seite 'about' neu geladen wird. Die about Seite holt keine Daten von irgendwo her, ein Nachladen ist übrigens gleichbedeutend mit einem Blinzeln.

Für den Staat config in meinem Winkel App ist wie folgt:

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

Und in den oberen Menüs, haben wir einen Link zu diesem Zustand zeigen:

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

ich viele Dinge ausprobiert haben Um dies zum Laufen zu bringen: Klicken auf den Link löst das erneute Laden desselben Status aus.

Dinge wie $state.go('about', {}, {reload: true}); oder $state.transitionTo('about', {}, {reload: true}); funktionieren nicht, weil die Links statisch sind.

Ein letzter Ausweg, den ich derzeit versuche, ist das Manipulieren der Reload-Sache in der run Phase von Angular durch Hören auf '$stateChangeSuccess' Ereignis, aber ich glaube nicht, dass es funktioniert, weil es keine Zustandsänderung überhaupt gibt, wenn Sie auf klicken die 'about' Verbindung, während Sie in diesem Zustand sind.

Gibt es Möglichkeiten, dies zu umgehen? Danke

Answer 1

Es gibt eine Option Attribut namens ui-sref-setzt, die mit dem UI-Router kommt. Ich hatte das gleiche Problem und es hat es gelöst.

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

Docs URL: UI Router DOcs

Answer 2

Du hast recht, ich kann keine state change events bekommen, entweder schon einmal in diesem Zustand zu feuern. Bis, und wenn diese Funktionalität verfügbar ist, um durch diesen einen Tag zu verwenden, ist hier eine semi-hacky Lösung dafür. Wir können einfach ng-click nutzen und eine dumme Logik verwenden, um QA (in Ihrem Fall) zu beschwichtigen. Außerdem kenne ich Ihre Controller-Implementierung nicht, deshalb habe ich in diesem Beispiel meinen Vorschlag auf $rootScope in .run für Einfachheit und Sichtbarkeit platziert, aber integrieren Sie entsprechend, wenn Sie sich dazu entscheiden. Beachten Sie das folgende Beispiel ...

<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