Angular Ui-Router zeigt alte veraltete Daten nach dem Übergang zurück zum Status

Question

Wir haben eine ASP.NET MVC 5-Anwendung, die Ui-Router AngularJS-Modul verwendet.

Wenn wir zu einem Zustand zurückkehren, der bereits geladen wurde, werden immer die alten Daten angezeigt, bis wir eine vollständige Seite aktualisieren.

Zum Beispiel:

• Nutzer klickt ‚Profil‘ zeigen wir den „ViewProfile“ Zustand, eine Seite das Profil
• Benutzer klickt auf „Profil bearbeiten“ angezeigt wird, zeigen wir den „EditProfile“ Zustand , eine Seite mit Feldern das Profil
• Benutzer macht Änderungen und klickt auf ‚Speichern‘ bearbeiten, werden sie dann wieder auf den „ViewProfile“ Zustand bewegt
• Wenn „ViewProfile“ Zustand geladen wird, es immer noch die alten Daten vor der zeigt, Bearbeitungen

Wie können wir erzwingen, dass bei jedem Ladevorgang neue Daten abgerufen werden?

Angular Config

var app = angular.module("MyApp", ['ngIdle', 'ui.router']) 
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
     function ($stateProvider, $urlRouterProvider, $locationProvider) { 
      // Configure client-side routing 
      $locationProvider.hashPrefix("!").html5Mode(true); 
      $urlRouterProvider.otherwise("/"); 

      $stateProvider 
       .state('Home', { 
        url: '/', 
        views: { 
         "mainContainer": { 
          templateUrl: function (params) { return 'Home/Index'; } 
         } 
        } 
       })      
       .state('ProfileManagement', { 
        url: '/ProfileManagement-{action}', 
        views: { 
         "mainContainer": { 
          templateUrl: function (params) { return 'ProfileManagement/' + params.action; } 
         } 
        } 
       }) 
     }]); 

Wie wir den Übergang

$state.go(stateName, { action: actionName }, { reload: true, inherit: false, notify: true }); 

EDIT w/Lösung Da alle Funktionen geschrieben mit jQuery tun, können wir nicht Angular verwenden Controller, um die Daten zu steuern. Unsere Lösung bestand darin, das Angular Template Caching mit dem folgenden Code komplett zu deaktivieren:

app.run(function ($rootScope, $templateCache) { 
     $rootScope.$on('$viewContentLoaded', function() { 
      $templateCache.removeAll(); 
     }); 
    }); 

Answer 1

Vielleicht funktioniert das für Ihr Problem.

app.run(['$rootScope', function ($rootScope){ $rootScope.$on('$stateChangeStart', function(event, toState){ $rootScope.UrlActive=toState.name; }); }]);

In Ihrem Winkelregler sollten Sie etwas davon haben:

app.controller('AnalisisCtrl', ['$scope','$rootScope', function ($scope,$rootScope) { $scope.$watch('UrlActive', function(newValue) { if(newValue="ProfileManagement"){ doSomething(); }; }); }]);

Answer 2

standardmäßig ui-Router

In Ihrem Winkel Haupt-Seite, die Sie so etwas wie dieses haben sollte Der Statusübergang wird den Controller von toState nicht erneut instanziieren.

Um Instantiierung des Controllers zu erzwingen, können Sie dies tun.

//assuming you are using $state.go to go back to previous state 
$state.go('to.state', params, { 
    reload: true 
}); 

Answer 3

Sie müssen Entschlüsse verwenden, etwa so:

var app = angular.module("MyApp", ['ngIdle', 'ui.router']) 
    .config(['$stateProvider', '$urlRouterProvider', '$locationProvider', 
    function ($stateProvider, $urlRouterProvider, $locationProvider) { 
     // Configure client-side routing 
     $locationProvider.hashPrefix("!").html5Mode(true); 
     $urlRouterProvider.otherwise("/"); 

     $stateProvider 
     .state('Home', { 
      url: '/', 
      views: { 
      "mainContainer": { 
       templateUrl: function (params) { return 'Home/Index'; } 
      } 
      }, 
      resolve: { 
      loadedData: (injectable) => injectable.getData() 
      } 
     })      
     .state('ProfileManagement', { 
      url: '/ProfileManagement-{action}', 
      views: { 
      "mainContainer": { 
       templateUrl: function (params) { return 'ProfileManagement/' + params.action; } 
      } 
      }, 
      resolve: { 
      loadedData: (injectable) => injectable.getData() 
      } 
     }) 
    }]); 

In jedem Staat gibt es eine Lösung ist es, in der injizierbaren Dienst der Methode 'getData()' aufrufen (Ich sage ein "Service", denn hier würden wir die Daten laden lassen.

Dann wird es für jeden Controller des Staates Zugriff auf die LoadData-Auflösung haben; Die Daten werden zu diesem Zeitpunkt bereits geladen und können von diesem Controller verwendet werden.Wenn Sie also in Ihrem Fall zu dem Zustand zurückkehren, aus dem Sie gekommen sind, werden die neu aktualisierten Daten erneut geladen und sind wieder in diesem Zustand verfügbar.

Behalten Sie Ihren Zustand Übergang der gleiche, mit dem Reload: True, als das ist, was Sie auch wollen.