1

我目前正在使用 angularjs 的 $http 服务从本地托管的 json 文件中检索数据。然后将该文件中的数据发送到控制器并通过 ui.router 在视图上显示为状态，在该视图中可以修改数据。然后，从该状态修改的数据显示在不同的状态，该状态以 json 格式显示该数据，然后由用户复制并粘贴到文档中。但是，每次更改状态时，修改后的数据似乎都会恢复到原始数据，因为每次状态更改时都需要控制器重新加载原始数据。有什么办法可以让数据只加载一次？

服务.js

angular.module('angNewsApp')
.service('CustomerService', ['$http', function($http) {

    var customers;


    function init() {
        return $http.get('customers/customers.json')
        .then(function(data) {
            customers = data.data;
        }); 
    }

    function getCustomers() {
        return customers

    }

    return {
        init: init,
        getCustomers: getCustomers
    };

}])

客户控制器.js

angular.module('angNewsApp')

.controller('CustomerCtrl', function($scope, CustomerService) {

CustomerService.init().then(function() {
  $scope.customers = CustomerService.getCustomers();
  angular.forEach($scope.customers, function(customer) {
    angular.forEach(customer.external_photos, function(photo) {
      // Possibly fix broken URLs here.
      // photo.external_url
    });
  });
});  
//if you console.log($scope.customers) out here it returns as undefined
4

1 回答 1

0

通常在这种情况下，我在第一次调用服务方法时发出 http 请求，然后在后续调用中使用缓存的值。

angular.module('angNewsApp') .service('CustomerService', ['$http', '$q', function($http, $q) {

function getCustomers() {
    var deferred = $q.defer();
    if (!this.customers) {
       $http.get('customers/customers.json')
    .then(function(data) {
        this.customers = data.data;
        deferred.resolve(this.customers);
    });
    } else {
      deferred.resolve(this.customers);
    }

    return deferred.promise;

}

return {
    customers: undefined,
    getCustomers: getCustomers
};

}])

然后在你的控制器 CustomerService.getCustomers().then(function(customers) {

$scope.customers = customers;
...

请记住，如果您希望对客户对象的更改跨状态持续存在，则您需要更新 CustomerService.customers 对象。

于 2014-09-30T19:46:10.803 回答