Угловой ui-router показывает старые устаревшие данные после перехода обратно в состояние

Question

У нас есть приложение ASP.NET MVC 5, которое использует ui-router AngularJS module.

Когда мы вернемся в состояние, которое уже было загружено, оно всегда показывает старые данные, пока мы не обновим полную страницу.

Например:

• пользователь нажимает кнопку «Просмотр профиля», мы показываем состояние «ViewProfile», страница отображения профиля
• Пользователь нажимает «Редактировать профиль», мы показываем состояние «EditProfile» , страница с полями для редактирования профиля
• Пользователь вносит изменения и нажимает «Сохранить», затем они возвращаются в состояние «ViewProfile»
• Когда состояние «ViewProfile» загружается, оно все еще показывает старые данные до редактирование

Как мы можем заставить маршрут ui извлекать свежие данные в любое время, когда он загружает любое состояние?

Угловая конфигурация

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; } 
         } 
        } 
       }) 
     }]); 

Как мы делаем переход

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

EDIT ж/Решение Поскольку все функции записывается с помощью JQuery, мы не можем использовать угловые контроллеры для управления данными. Наше решение состояло в том, чтобы полностью отключить кеширование угловых шаблонов с помощью следующего кода:

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

Answer 1

Возможно, эта работа для вашей проблемы.

В вашей угловой главной странице вы должны иметь что-то вроде этого:

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

В вашем угловом контроллере вы должны иметь что-то вроде этого:

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

Answer 2

По умолчанию Ui-маршрутизатор переход состояния не будет повторно запускать контроллер toState.

Чтобы создать экземпляр контроллера, вы можете это сделать.

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

Answer 3

Вы должны использовать разрешились, например, так:

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() 
      } 
     }) 
    }]); 

В каждом государстве есть решительность, вызывая метод «GetData()» в инъекционной службе (я говорю «сервис», потому что именно там мы будем загружать данные).

Затем для каждого контроллера состояния он будет иметь доступ к разрешению загруженных данных; данные уже будут загружены в этот момент и будут использоваться этим контроллером.Поэтому для вашего сценария, возвращаясь к состоянию, из которого вы пришли, обновленные данные снова будут загружены и снова доступны в этом состоянии.

Сохраняйте переход состояния таким же, с reload: true, так как это то, что вы хотите.