一尘不染

在AngularJS中保存视图状态

angularjs

我开发了一个HTML 5应用程序,并具有加载用户评论的视图。它是递归的:任何注释都可以具有可单击的子注释,这些子注释正在同一视图中加载并使用相同的控制器。

一切都好。但是,当我想返回时,评论会再次加载,而我的位置和子评论也会丢失。

返回时可以保存视图的状态吗?我想我可以使用某种技巧,例如:每当我单击子注释并隐藏上一个视图时,都可以追加一个新视图。但是我不知道该怎么做。


阅读 217

收藏
2020-07-04

共1个答案

一尘不染

是的,您应该将状态保留在服务中,而不是在控制器内部加载和保留UI状态。这意味着,如果您正在执行此操作:

app.config(function($routeProvider){
 $routeProvider.when('/', {
   controller: 'MainCtrl'
 }).when('/another', {
   controller: 'SideCtrl'
 });
});

app.controller('MainCtrl', function($scope){
  $scope.formData = {};

  $scope./* other scope stuff that deal with with your current page*/

  $http.get(/* init some data */);
});

您应该将初始化代码更改为服务以及状态,这样您就可以在多个视图之间保持状态:

app.factory('State', function(){
  $http.get(/* init once per app */);

  return {
    formData:{},
  };
});

app.config(function($routeProvider){
 $routeProvider.when('/', {
   controller: 'MainCtrl'
 }).when('/another', {
   controller: 'SideCtrl'
 });
});

app.controller('MainCtrl', function($scope, State){
  $scope.formData = State.formData;

  $scope./* other scope stuff that deal with with your current page*/
});

app.controller('SideCtrl', function($scope, State){
  $scope.formData = State.formData; // same state from MainCtrl

});

app.directive('myDirective', function(State){
  return {
    controller: function(){
      State.formData; // same state!
    }
  };
});

当您来回浏览视图时,它们的状态将被保留,因为您的服务是单例的,是在您第一次将其注入控制器时初始化的。

还有一个新的ui.router,它具有状态机,它是状态机的低级版本,$routeProvider您可以使用来细化晶粒的持久状态$stateProvider,但是它目前是实验性的(将在angular
1.3上发布)

2020-07-04