角度ui-routerには、状態に戻って古い無効データが表示されます

Question

私たちには、ui-router AngularJSモジュールを使用するASP.NET MVC 5アプリケーションがあります。

すでにロードされている状態に戻ると、ページ全体をリフレッシュするまで、常に古いデータが表示されます。例えば

：

• ユーザーがクリック「プロフィール」、私たちは「ViewProfile」状態を示し、プロファイル
• ユーザーがクリックする「プロフィールの編集」を表示するページ、我々は「EditProfile」状態を示し、 、プロファイルを編集するフィールドを持つページ
• ユーザーは変更を加えて「保存」をクリックすると、「ViewProfile」状態に戻されます。
• 「ViewProfile」状態がロードされると、編集

状態をロードするたびにui-routeに新しいデータを強制的に引き込ませるにはどうすればよいですか？すべての機能は、jQueryのを使用して書かれているので、我々はソリューション /wの移行

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

EDITをやっている方法

角度設定

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

これはあなたの問題ではたらくかもしれません。あなたの角度のメインページで

あなたはこのようなものが必要です：デフォルトのUI-ルータによって

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

Answer 2

：あなたの角度制御装置においては

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

をあなたはこのような何かを持っている必要がありますステートのコントローラはtoStateのコントローラを再インスタンス化しません。

コントローラのインスタンス化を強制するには、これを行うことができます。

あなたがそうのように、解決さを使用する必要が

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

Answer 3

：（私が言っているの注射サービスにおける「の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() 
      } 
     }) 
    }]); 

、決意があります'サービス'というのは、そこからデータが読み込まれる場所だからです）。

各状態のコントローラでは、loadedData解決にアクセスできます。データはその時点で既にロードされ、そのコントローラで使用可能になります。したがって、あなたのケースのシナリオでは、元の状態に戻って、新たに更新されたデータが再びロードされ、その状態で再度利用可能になります。

リロードを使用して、状態の遷移を同じ状態に保ちます：true、これも同様です。