使用Angular UI-Router保留状态

Question

我有一个带有ng-view的应用程序,可以将电子邮件发送给从联系人列表中选择的联系人.当用户选择"收件人"时,它显示另一个可以搜索,过滤等的视图/页面."发送电子邮件"和"联系人列表"是在ng-view中加载的不同html部分.

我需要保持发送表单状态,以便当用户从联系人列表中选择某人时,它返回到同一点(和相同的状态).我读到了不同的解决方案($ rootScope,使用ng-show隐藏的div,...)但我想知道UI路由器是否会帮助我使用它的状态管理器.如果没有,还有其他现成的解决方案吗？

谢谢!

Answer 1

我使用的解决方案是使用服务作为我的数据/模型存储.他们坚持控制器的变化.

例

用户服务(我们的模型在控制器更改后持续存在)

app.factory('userModel', [function () {
    return {
        model: {
            name: '',
            email: ''
        }
    };
}]);

在控制器中使用它

function userCtrl($scope, userModel) {
    $scope.user = userModel;
}

另一个优点是您可以轻松地在其他控制器中重用您的模型.

Answer 2

我不确定是否推荐这个,但是我创建了一个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);
    });
}]);