Angular 服务数组为空

Question

我正在尝试将 JSON 的数据存储在服务内的共享数组中。问题是每次我想用一些新内容（例如新 JSON）更新服务的数组时，我需要先清除数组，然后数组保持为空，而不是加载新数据。

我的服务是这样的：

.service('jsonTest',
    function() {
      var json = [];

      function storeJson(file) {
        json=[];
        json.push(file);
      }
      return {
        storeJson: storeJson,
        showJson: json
      }
    });

如您所见，每次使用

加载新数据之前，我都会清理数组

json = [];

但是加载新内容后它仍然是空的。

我做错了什么？

您可以在此处查看该示例：http://plnkr.co/edit/tN9WvNminw1uLpThWPvu?p=preview 该服务在 app.js 中，并在 MainCtrl (main.js) 和 ProductCtrl (product.js) 中使用。

有什么建议吗？

Answer 1

你不是在观看 json 并在每次更改时更新 showJson。您需要执行以下操作：

.service('jsonTest', function() {
  var json = {
    showJson: [],
    storeJson: function(file) {
      json.showJson=[];
      json.showJson.push(file);
    }
  };

  return json;
});

因为json是一个局部变量，当你在storeJson中设置它等于[]时，它使用了一个新的内存位置，即它不是一个引用变量，所以showJson 不会自动更新。如果您正在清除现有数组（可能通过 .pop 直到没有剩余元素），它会起作用，但是由于您正在分配一个 new 空数组，它不会't.

或者，您也可以使 showJson 成为 returns json 的函数。那也行。

.service('jsonTest', function() {
  var json = [];

  function storeJson(file) {
    json=[];
    json.push(file);
  }
  function showJson() {
    return json;
  }
  return {
    storeJson: storeJson,
    showJson: showJson
  }
});

Answer 2

我认为您应该使用空对象而不是数组。

.service('jsonTest', function() {
    var json = {};
    return {
        set: function(val){
            json = val;
        },
        get: function(){
            return json;
        }
    };
});

更新后你是 Plunker

Answer 3

也许，更好的结构是将 $http 调用移动到服务本身，这样它才是真正的服务。 Tben 将服务注入 MainCtrl。

因此，您可以像这样调用服务（我们称之为 'myAppService'）：

 .controller('MainCtrl', ['$scope', '$log', 'myAppService',
    function ($scope, $log, myAppService) {

       $scope.getData = function(filepath) {
          // do something with results ie. store etc.
          var fileOrPromise = myAppService.get(filepath);
       };
 ]);

和一个service/factory:

 .factory('myAppService', ['$http', '$q', '$window',
    function($http, $q, $window) {
      return {
          get: function(filepath) {
             return _goGetFile(filepath);
          },
          // do something else
      };
    }
  ]);

以下是设计和最佳实践的一些参考：

希望这对您有所帮助。

Angular 服务数组为空

Angular service array empty

angularjs

angular-ui

angular-services