Сохранять состояние с помощью Angular UI-Router

У меня есть приложение с ng-представлением, которое отправляет электронные письма, чтобы связаться с выбранным из списка контактов. Когда пользователи выбирают "Получатель", он показывает другой просмотр/страницу, где он может искать, фильтровать и т.д. "Отправить адрес электронной почты" и "Список контактов" - это разные частичные части html, которые загружаются в ng-view.

Мне нужно сохранить состояние формы отправки, когда пользователи выбирают кого-либо из списка контактов, он возвращается в ту же точку (и в том же состоянии). Я читал о различных решениях ($ rootScope, скрытые divs с помощью ng-show,...), но я хочу знать, поможет ли UI-маршрутизатор мне с ним State Manager. Если нет, существуют ли другие готовые решения?

Спасибо!

Ответ 1

Решение, с которым я пошел, использует службы в качестве хранилища данных/модели. они сохраняются при изменении контроллера.

Пример

пользовательская услуга (наша модель, которая сохраняется при изменении контроллера)

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

используя его в контроллере

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

Другим преимуществом этого является то, что вы можете повторно использовать свою модель в других контроллерах так же легко.

Ответ 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);
    });
}]);

Ответ 3

Я нашел Angular-Multi-View, чтобы стать находкой для этого сценария. Он позволяет сохранять состояние в одном представлении, в то время как другие представления обрабатывают маршрут. Он также позволяет нескольким представлениям обрабатывать один и тот же маршрут.

Вы можете сделать это с помощью UI-Router, но вам нужно будет вложить представления, которые IMHO могут получить уродливыми.