앵글 ui-router는 상태로 전환 된 후 오래된 부실 데이터를 보여줍니다.

Question

우리는 ui-router AngularJS 모듈을 사용하는 ASP.NET MVC 5 애플리케이션을 가지고 있습니다.

이미로드 된 상태로 되돌아 가면 전체 페이지를 새로 고칠 때까지 항상 이전 데이터가 표시됩니다. 예를 들어

:

• 사용자 클릭 '프로필보기', 우리는 "ViewProfile"상태, 프로필
• 사용자가 클릭 "프로필 편집", 우리는 "EditProfile"상태 표시를 표시하는 페이지를 표시 , 프로필을 편집 할 필드가있는 페이지
• 사용자가 변경하고 '저장'을 클릭하면 "ViewProfile"상태로 다시 이동합니다.
• "ViewProfile"상태가로드 될 때 여전히 이전 데이터를 보여줍니다. 수정 사항 :

상태를로드 할 때 ui-route가 강제로 새로운 데이터를 가져 오게하려면 어떻게해야합니까?

각도 설정 우리는 모든 기능이 jQuery를 사용하여 작성되기 때문에, 우리는 각도 사용할 수 없습니다

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

편집 솔루션 승/전환을하고 어떻게

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

컨트롤러를 사용하여 데이터를 제어합니다. 우리의 솔루션은 다음 코드로 각도 템플릿 캐싱을 완전히 비활성화하는 것이 었습니다.

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

Answer 1

어쩌면이 문제가 발생할 수 있습니다. 당신의 각 메인 페이지에서

이 같은이 있어야합니다

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

Answer 2

기본 UI 라우터로 : 당신의 각 컨트롤러에서

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

당신이 뭔가를해야한다 상태 전환은 toState의 컨트롤러를 다시 인스턴스화하지 않습니다.

컨트롤러의 인스턴스화를 강제로 수행 할 수 있습니다. 주 사용 서비스 방법 '있는 GetData()'(나는 말인지 전화,

각 상태에서

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

가하는 결의가 :

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

Answer 3

당신은과 같이, 결의를 사용해야합니다 '서비스'는 데이터가로드되는 곳이기 때문에).

각 상태의 컨트롤러에 대해 loadedData resolve에 액세스 할 수 있습니다. 데이터는 그 시점에서 이미로드되고 해당 컨트롤러에서 사용할 수 있습니다.따라서 귀하의 시나리오에 대해, 귀하가 출국 한 상태로 돌아 가면 새로 업데이트 된 데이터가 다시로드되어 해당 상태에서 다시 사용할 수 있습니다.

reload를 사용하여 상태를 동일하게 유지하십시오 : 참, 원하는대로 선택하십시오.