Angularjs 使用角度UI路由器保持状态
我有一个带有ng视图的应用程序,可以向从联系人列表中选择的联系人发送电子邮件。 当用户选择“收件人”时,它会显示另一个视图/页面,用户可以在其中搜索、筛选等。“发送电子邮件”和“联系人列表”是加载在ng视图中的不同html部分 我需要保持发送表单状态,这样当用户从联系人列表中选择某人时,它会返回到相同的点(和相同的状态)。我读到了不同的解决方案($rootScope,使用ng-show隐藏div,…),但我想知道UI-router是否能帮助我处理它的状态管理器。如果没有,是否有其他现成的解决方案 谢谢 我发现这是天赐良机。它允许您在一个视图中保留状态,而其他视图正在处理管线。它还允许多个视图处理同一路线Angularjs 使用角度UI路由器保持状态,angularjs,angular-ui,Angularjs,Angular Ui,我有一个带有ng视图的应用程序,可以向从联系人列表中选择的联系人发送电子邮件。 当用户选择“收件人”时,它会显示另一个视图/页面,用户可以在其中搜索、筛选等。“发送电子邮件”和“联系人列表”是加载在ng视图中的不同html部分 我需要保持发送表单状态,这样当用户从联系人列表中选择某人时,它会返回到相同的点(和相同的状态)。我读到了不同的解决方案($rootScope,使用ng-show隐藏div,…),但我想知道UI-router是否能帮助我处理它的状态管理器。如果没有,是否有其他现成的解决方案
您可以使用UI路由器来实现这一点,但您需要嵌套视图,而这些视图可能会变得丑陋。我使用的解决方案是使用服务作为我的数据/模型存储。它们在控制器更改中保持不变 范例 用户服务(我们的模型在控制器更改中保持不变) 在控制器中使用它
function userCtrl($scope, userModel) {
$scope.user = userModel;
}
这样做的另一个好处是,您可以同样轻松地在其他控制器中重用您的模型。我不确定是否建议这样做,但我创建了一个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);
});
}]);
我从未使用过服务。看起来不错。但是如果模型是基于路由参数(例如:$routeParams.myId)创建的呢?您将把结果存储在服务中而不是控制器中。其他一切都可以是相同的。如果您的示例不完整,您需要一种方法将您的服务模型中的更改传递给其他控制器。当完全离开应用程序时,还可以保存状态。@JonathonHill这个例子是针对这个问题的(我希望是这样)。你所评论的例子的链接恰好也是我的:),是的,它提供了更多关于如何实现特定的上下文。如果你只存储一些数据,如姓名和电子邮件,建议不要使用“仅存储和返回一些数据”的服务。你可以用a代替。对我来说,可能的副本似乎是一个可能的解决方案。您是否已证明此过程成功?我现在还需要实现一种机制来保护国家安全。问候MarioI还没有在生产应用程序中使用它,但我的开发应用程序正在使用此代码,并且似乎工作得很好。超级工作Justin!我的同事对这个解决方案很满意!祝你周末愉快。完美的解决方案贾斯汀。谢谢你!真不错
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);
});
}]);