使用Angular UI-Router保留状态
使用Angular UI-Router保留状态
提问于 2013-08-03 02:32:08
我有一个应用程序与ng-view发送电子邮件到联系人列表中选择的联系人。当用户选择“接收者”时，它显示另一个视图/页面，用户可以在该视图/页面中搜索、过滤等。“发送电子邮件”和“联系人列表”是在ng-view中加载的不同的html部分。
我需要保持发送表单的状态，这样当用户从联系人列表中选择某人时，它会返回到相同的点(和相同的状态)。我读到了不同的解决方案($rootScope，使用ng-show的隐藏div，...)但我想知道UI-router是否能帮助我使用它的状态管理器。如果没有，有没有其他现成的解决方案？
谢谢!
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-08-03 07:58:25
我使用的解决方案是使用服务作为我的数据/模型存储。它们会在控制器更改时保持不变。
示例
用户服务(我们的模型在控制器变化时保持不变)
app.factory('userModel', [function () {
return {
model: {
name: '',
email: ''
}
};
}]);在控制器中使用它
function userCtrl($scope, userModel) {
$scope.user = userModel;
}这样做的另一个好处是，您可以轻松地在其他控制器中重用您的模型。
Stack Overflow用户
发布于 2016-08-21 12:18:38
我不确定这是否是推荐的，但我创建了一个StateService来保存/加载控制器作用域中的属性。它看起来是这样的：
(function(){
'use strict';
angular.module('app').service('StateService', function(){
var _states = {};
var _save = function(name, scope, fields){
if(!_states[name])
_states[name] = {};
for(var i=0; i<fields.length; i++){
_states[name][fields[i]] = scope[fields[i]];
}
}
var _load = function(name, scope, fields){
if(!_states[name])
return scope;
for(var i=0; i<fields.length; i++){
if(typeof _states[name][fields[i]] !== 'undefined')
scope[fields[i]] = _states[name][fields[i]];
}
return scope;
}
// ===== Return exposed functions ===== //
return({
save: _save,
load: _load
});
});
})();为了使用它，我在我的控制器的末尾放了一些代码，如下所示：
angular.module('app').controller('ExampleCtrl', ['$scope', 'StateService', function ($scope, StateService) {
$scope.keyword = '';
$scope.people = [];
...
var saveStateFields = ['keyword','people'];
$scope = StateService.load('ExampleCtrl', $scope, saveStateFields);
$scope.$on('$destroy', function() {
StateService.save('ExampleCtrl', $scope, saveStateFields);
});
}]);Stack Overflow用户
发布于 2013-08-03 03:00:38
我发现Angular-Multi-View是这个场景的天赐之物。它允许您在一个视图中保留状态，而其他视图正在处理路由。它还允许多个视图处理相同的路由。
你可以用UI-Router来做这件事，但是你需要嵌套视图，这样IMHO就会变得丑陋。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18023823
复制相关文章
相似问题