Question

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

services.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
    };

}])

customerController.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

Answer 1

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

angular.module（ 'angNewsApp'） .service（'CustomerService'，['$ http'，'$ q'，函数（$ 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;
...

请记住，如果您希望更改customer对象以在各州之间保持更新状态，则需要更新CustomerService.customers对象。

AngularJS：承诺的范围（不是$ scope）

1 个答案: