Question

我正在使用AngularJS 1.0并且需要在页面上维护状态（用户输入的数据），即使用户导航（角度路由）到另一个页面然后返回到原始页面。这是它的样子：

从我在网上看到的，解决方案是使用服务/工厂来存储数据。以下是我实施的片段（注意评论;它们解决了我的问题）：

    function cassetteController($scope, $rootScope, $http, $timeout, cassetteRepository) {
        // Need to get state from repository in case the user is coming back to this page.
        // This means every time we add some variable to our controller, we have to remember to include it here.
        $scope.userEnteredSubId = cassetteRepository.userEnteredSubId;
        $scope.cassettes = cassetteRepository.cassettes;
        $scope.numberOfCassettesToShow = cassetteRepository.numberOfCassettesToShow;
        $scope.subId1 = cassetteRepository.subId1;
        $scope.subId2 = cassetteRepository.subId2;
        $scope.subId3 = cassetteRepository.subId3;

        // Every time we alter a $scope variable, we have to remember to also alter the state in the factory.
        // This seems error-prone and tedious. Each line below is followed by a line that stores its
        // value in the factory. 
        $scope.onClickCassette = function (cassette) {
            $scope.subId1 = cassette._content[0].SolarPanel.SubId;
            cassetteRepository.subId1 = cassette._content[0].SolarPanel.SubId;
            $scope.subId2 = cassette._content[1].SolarPanel.SubId;
            cassetteRepository.subId2 = cassette._content[1].SolarPanel.SubId;
            $scope.subId3 = cassette._content[2].SolarPanel.SubId;
            cassetteRepository.subId3 = cassette._content[2].SolarPanel.SubId;
        }
}

这是存储州的工厂：

app.factory('cassetteRepository', ['$http', '$rootScope', function ($http, $rootScope) {
    var state = {
        userEnteredSubId: '',
        cassettes: [],
        numberOfCassettesToShow: 10,
        subId1: '',
        subId2: '',
        subId3: ''
    }

    return state;
}]);

我的问题是：真的吗？似乎必须有一个更优雅的方法。我只展示了控制器的一部分。每次设置变量时，我都要记得在保持状态的工厂中设置对应的变量。我错过了什么吗？有更好的方法吗？

Answer 1

如果您使用此仅来保存值，那么我将使用值而不是创建服务。以下是在Angular中设置值的方法：

angular.module('yourAppName')
    .value('cassetteRepository', { data: {} });

现在您可以注入该值并直接使用其data属性，这样您就不必再更新两次了。以下是如何在控制器中使用它：

angular.module('yourAppName')
    .controller('yourControllerName', ['$scope', 'cassetteRepository', function($scope, cassetteRepository) {
        // create a local scope reference if you need to use this in your view
        $scope.cassetteRepository = cassetteRepository;

        // now when you set properties on $scope.cassetteRepository.data they are set on
        // the value and are persisted and shared across your app.
        // you can also use ng-model to two-way bind in your view.
        $scope.onClickCassette = function (cassette) {
            $scope.cassetteRepository.data.subId1 = cassette._content[0].SolarPanel.SubId;
            $scope.cassetteRepository.data.subId2 = cassette._content[1].SolarPanel.SubId;
            $scope.cassetteRepository.data.subId3 = cassette._content[2].SolarPanel.SubId;
        };
});

您不必在值中使用data对象。您也可以直接定义属性。 E.g：

.value('cassetteRepository', { userEnteredSubId = "", cassettes = [], numberOfCassettesToShow = 10, etc. })

通过这种方式，您可以提供默认值并消除.data部分。

在AngularjS中更改路由时维护状态

1 个答案: