I have an app with a ng-view that sends emails to contact selected from a contact list. When the users select "Recipient" it shows another view/page where he can search, filter, etc. "Send email" and "Contact list" are different html partials that are loaded in the ng-view.
我有一个带有ng-view的应用程序,可以将电子邮件发送给从联系人列表中选择的联系人。当用户选择“收件人”时,它显示另一个他可以搜索,过滤等的视图/页面。“发送电子邮件”和“联系人列表”是在ng-view中加载的不同html部分。
I need to keep the send form state so when the users select someone from the Contact List it returns to the same point (and same state). I read about different solutions ($rootScope, hidden divs using ng-show, ...) but I want to know if UI-router will help me with it's State Manager. If not, are there other ready-to-use solutions?
我需要保持发送表单状态,以便当用户从联系人列表中选择某人时,它返回到同一点(和相同的状态)。我读到了不同的解决方案($ rootScope,使用ng-show隐藏的div,...)但我想知道UI路由器是否会帮助我使用它的状态管理器。如果没有,还有其他现成的解决方案吗?
Thanks!
谢谢!
3 个解决方案
#1
22
The solution i have gone with is using services as my data/model storage. they persist across controller changes.
我使用的解决方案是使用服务作为我的数据/模型存储。他们坚持控制器的变化。
example
例
the user service ( our model that persists across controller changes )
用户服务(我们的模型在控制器更改后持续存在)
app.factory('userModel', [function () {
return {
model: {
name: '',
email: ''
}
};
}]);
using it in a controller
在控制器中使用它
function userCtrl($scope, userModel) {
$scope.user = userModel;
}
the other advantage of this is that you can reuse your model in other controllers just as easly.
另一个优点是您可以轻松地在其他控制器中重用您的模型。
#2
8
I'm not sure if this is recommended or not, but I created a StateService to save/load properties from my controllers' scopes. It looks like this:
我不确定是否推荐这个,但是我创建了一个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
});
});
})();
To use it, I put some code at the end of my controller like this:
为了使用它,我在控制器的末尾添加了一些代码,如下所示:
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);
});
}]);
#3
2
I have found Angular-Multi-View to be a godsend for this scenario. It lets you preserve state in one view while other views are handling the route. It also lets multiple views handle the same route.
我发现Angular-Multi-View对于这种情况来说是天赐之物。它允许您在一个视图中保留状态,而其他视图正在处理路径。它还允许多个视图处理相同的路由。
You can do this with UI-Router but you'll need to nest the views which IMHO can get ugly.
您可以使用UI-Router执行此操作,但您需要嵌套IMHO可能会变得丑陋的视图。
#1
22
The solution i have gone with is using services as my data/model storage. they persist across controller changes.
我使用的解决方案是使用服务作为我的数据/模型存储。他们坚持控制器的变化。
example
例
the user service ( our model that persists across controller changes )
用户服务(我们的模型在控制器更改后持续存在)
app.factory('userModel', [function () {
return {
model: {
name: '',
email: ''
}
};
}]);
using it in a controller
在控制器中使用它
function userCtrl($scope, userModel) {
$scope.user = userModel;
}
the other advantage of this is that you can reuse your model in other controllers just as easly.
另一个优点是您可以轻松地在其他控制器中重用您的模型。
#2
8
I'm not sure if this is recommended or not, but I created a StateService to save/load properties from my controllers' scopes. It looks like this:
我不确定是否推荐这个,但是我创建了一个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
});
});
})();
To use it, I put some code at the end of my controller like this:
为了使用它,我在控制器的末尾添加了一些代码,如下所示:
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);
});
}]);
#3
2
I have found Angular-Multi-View to be a godsend for this scenario. It lets you preserve state in one view while other views are handling the route. It also lets multiple views handle the same route.
我发现Angular-Multi-View对于这种情况来说是天赐之物。它允许您在一个视图中保留状态,而其他视图正在处理路径。它还允许多个视图处理相同的路由。
You can do this with UI-Router but you'll need to nest the views which IMHO can get ugly.
您可以使用UI-Router执行此操作,但您需要嵌套IMHO可能会变得丑陋的视图。