19

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

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

谢谢！

4

3 回答 3

22

我采用的解决方案是使用服务作为我的数据/模型存储。它们在控制器更改中持续存在。

例子

用户服务（我们的模型在控制器更改中持续存在）

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

在控制器中使用它

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

这样做的另一个优点是您可以在其他控制器中轻松重用您的模型。

于 2013-08-02T23:58:25.470 回答
9

我不确定这是否被推荐，但我创建了一个 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);
    });
}]);
于 2016-08-21T04:18:38.257 回答
2

我发现Angular-Multi-View是这种场景的天赐之物。它允许您在一个视图中保留状态，而其他视图正在处理路由。它还允许多个视图处理相同的路线。

您可以使用 UI-Router 执行此操作，但您需要嵌套视图，恕我直言，这可能会变得丑陋。

于 2013-08-02T19:00:37.927 回答