保存AngularJS中的视图状态

Question

我开发了一个HTML 5应用程序,并有一个加载用户注释的视图.它是递归的:任何注释都可以有可点击的子注释,它们在同一视图中加载并使用相同的控制器.

一切都好.但是,当我想回去时,评论再次加载,我失去了我的位置和我加载的子评论.

我回去后可以保存视图的状态吗？我想我可以使用某种技巧,例如:每次点击子评论并隐藏上一个视图时附加一个新视图.但我不知道该怎么做.

Answer 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,但它目前是实验性的(并将发布角度1.3)