我开发了一个HTML 5应用程序,并具有加载用户评论的视图。它是递归的:任何注释都可以具有可单击的子注释,这些子注释正在同一视图中加载并使用相同的控制器。
一切都好。但是,当我想返回时,评论会再次加载,而我的位置和子评论也会丢失。
返回时可以保存视图的状态吗?我想我可以使用某种技巧,例如:每当我单击子注释并隐藏上一个视图时,都可以追加一个新视图。但是我不知道该怎么做。
是的,您应该将状态保留在服务中,而不是在控制器内部加载和保留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上发布)
ui.router
$routeProvider
$stateProvider