blocks|key|48984|text|我发现Angular-Multi-View是这个场景的天赐之物。它允许您在一个视图中保留状态，而其他视图正在处理路由。它还允许多个视图处理相同的路由。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|48985|你可以用UI-Router来做这件事，但是你需要嵌套视图，这样IMHO就会变得丑陋。|48986|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/vincentdieltiens/Angular-Multi-View^0|3|I|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

I have found <a href="https://github.com/vincentdieltiens/Angular-Multi-View" rel="nofollow">Angular-Multi-View</a> 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.

You can do this with UI-Router but you'll need to nest the views which IMHO can get ugly.

blocks|key|49031|text|我使用的解决方案是使用服务作为我的数据/模型存储。它们会在控制器更改时保持不变。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49032|示例|49033|用户服务(我们的模型在控制器变化时保持不变)|49034|app.factory('userModel',+[function+()+{
++++return+{
++++++++model:+{
++++++++++++name:+'',
++++++++++++email:+''
++++++++}
++++};
}]);|code-block|syntax|javascript|49035|在控制器中使用它|49036|function+userCtrl($scope,+userModel)+{
++++$scope.user+=+userModel;
}|49037|这样做的另一个好处是，您可以轻松地在其他控制器中重用您的模型。|49038|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

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 )

<pre><code>app.factory('userModel', [function () {
 return {
 model: {
 name: '',
 email: ''
 }
 };
}]);
</code></pre>

using it in a controller

<pre><code>function userCtrl($scope, userModel) {
 $scope.user = userModel;
}
</code></pre>

the other advantage of this is that you can reuse your model in other controllers just as easly.

blocks|key|49079|text|我不确定这是否是推荐的，但我创建了一个StateService来保存/加载控制器作用域中的属性。它看起来是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|49080|(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%2B%2B){
++++++++++++++++_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%2B%2B){
++++++++++++++++if(typeof+_states[name][fields[i]]+!==+'undefined')
++++++++++++++++++++scope[fields[i]]+=+_states[name][fields[i]];
++++++++++++}
++++++++++++return+scope;
++++++++}

++++++++//+=====+Return+exposed+functions+=====+//
++++++++return({
++++++++++++save:+_save,
++++++++++++load:+_load
++++++++});

++++});
})();|code-block|syntax|javascript|49081|为了使用它，我在我的控制器的末尾放了一些代码，如下所示：|49082|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);
++++});
}]);|49083|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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:

<pre><code>(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&lt;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&lt;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
 });

 });
})();
</code></pre>

To use it, I put some code at the end of my controller like this:

<pre><code>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);
 });
}]);
</code></pre>

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.

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?

Thanks!

Preserve state with Angular UI-Router

路由

我有一个应用程序与ng-view发送电子邮件到联系人列表中选择的联系人。当用户选择“接收者”时，它显示另一个视图/页面，用户可以在该视图/页面中搜索、过滤等。“发送电子邮件”和“联系人列表”是在ng-view中加载的不同的html部分。我需要保持发送表单的状态，这样当用户从联系人列表中选择某人时，它会返回到相同的点(和...

问使用Angular UI-Router保留状态
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Angular UI-Router保留状态EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Angular UI-Router保留状态
EN