Question

我们有一个使用ui-router AngularJS模块的ASP.NET MVC 5应用程序。

当我们返回已加载的状态时，它会始终显示旧数据，直到我们进行整页刷新。

例如：

用户点击“查看个人资料”，我们会显示“ViewProfile”状态，一个显示个人资料的页面
用户点击“编辑个人资料”，我们会显示“EditProfile”状态，一个包含要编辑个人资料的字段的页面
用户进行更改并点击“保存”，然后将其移回“ViewProfile”状态
当“ViewProfile”状态加载时，它仍会在编辑之前显示旧数据

我们怎样才能强制ui-route在加载任何状态时提取新数据？

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

我们如何进行转型

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

使用解决方案编辑 由于所有功能都是使用jQuery编写的，因此我们无法使用Angular控制器来控制数据。我们的解决方案是使用以下代码完全禁用Angular模板缓存：

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-router状态转换不会重新实例化到State的控制器。

要强制实例化控制器，您可以执行此操作。

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

Answer 3

你需要使用resolve，如下所示：

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

在每个州，有一个决心，调用方法＆＃39; getData（）＆＃39;在注射服务中（我说服务＆＃39;因为我们将从中加载数据）。

然后对于每个州的控制器，它将有权访问loadedData resolve;数据将在该点加载并由该控制器使用。因此，对于您的情况，回到您来自的状态，新更新的数据将再次加载并再次在该状态下可用。

保持状态转换相同，重新加载：true，因为这也是你想要的。

Angular ui-router在转换回状态后显示旧的过时数据

3 个答案: