我正在使用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;
}]);
我的问题是:真的吗?似乎必须有一个更优雅的方法。我只展示了控制器的一部分。每次设置变量时,我都要记得在保持状态的工厂中设置对应的变量。我错过了什么吗?有更好的方法吗?
答案 0 :(得分: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
部分。