AngularJS z ui.router: przeładuj stronę po kliknięciu tego samego linku stanu

Question

Właśnie dostałem prośbę od naszego zespołu ds. Kontroli jakości, który moim zdaniem brzmi śmiesznie. W takim przypadku: załóżmy, że jesteś już w stanie "około"/stronie w aplikacji kątowej, a po ponownym kliknięciu na stan "o" w górnym menu, chcesz ponownie załadować stronę "o". Strona about nie pobiera danych z dowolnego miejsca, nawiasem mówiąc, przeładowanie jest po prostu równoznaczne z miganiem.

Dla config państwowej w moim kątowej aplikacji jest tak:

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

I w górę menu, mamy odnośnik wskazujący na ten stan:

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

Próbowałem wielu rzeczy aby to działało: kliknięcie łącza powoduje ponowne załadowanie tego samego stanu.

Rzeczy takie jak $state.go('about', {}, {reload: true}); lub $state.transitionTo('about', {}, {reload: true}); nie działają, ponieważ łącza są statyczne.

Ostatnią próbą, jaką obecnie próbuję, jest manipulowanie operacją przeładowania w fazie run fazy Angulara przez odsłuchanie zdarzenia '$stateChangeSuccess', ale nie sądzę, że to zadziała, ponieważ w ogóle nie nastąpi zmiana stanu, jeśli klikniesz link 'about', gdy masz rację w tym stanie.

Czy są jakieś sposoby obejścia tego? Dzięki

Answer 1

Jest atrybutem opcja nazywa ui-sref-zdecyduje, że pochodzi z interfejsu routera. Zmierzyłem ten sam problem i go rozwiązałem.

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

Docs URL: UI Router DOcs

Answer 2

Masz rację, nie mogę uzyskać żadnego state change events, aby strzelał już raz w tym stanie. Do tego czasu i jeśli ta funkcjonalność stanie się dostępna do użycia przez ten api pewnego dnia, oto rozwiązanie na pół hacky. Możemy po prostu wykorzystać ng-click i użyć jakiejś głupiej logiki, aby poprawić QA (w twoim przypadku). Ponadto nie znam implementacji kontrolera, dlatego w tym przykładzie umieściłem moją sugestię na $rootScope w .run dla uproszczenia i widoczności, ale w razie potrzeby włącz ją. Zaobserwować następujący przykład ...

<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