javascript - Angular JS : importing JSON data with $http. get() - 在 Controller 中工作，不在服务中 - 为什么？

Question

我正在尝试将 JSON 数据导入到 angularJS 应用程序中。我将我的应用程序拆分为 Controller 和导入服务，但都在不同的文件中。我也在用bower、grunt和yeoman(工作原因，不太习惯，可能还有问题。)

奇怪的行为是:

我想用 $http.get() 检索 JSON 数据并解析它——所有这些都在一个服务中，这样我就可以将数据对象从那里分发给主 Controller ，而不必解析它那里。奇怪的是，我没有得到任何数据，它是空的或不可读的。然后我分发了我 $http.get() 方法返回的 promise 并在 Controller 中解决了它。那不是我想要的，但现在可以了……但是为什么呢？

我猜这是某个 schmall 错误，但我和我的团队成员都找不到。奇怪的是，在没有 grunt、yeoman 和 bower 的情况下做一个小的测试应用程序它奏效了。

我会很感激每一个提示或想法...贾娜

这是我在无效版本中的代码，首先是带有 Controller 的主模块:

/** Main module of the application. */
(function () {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = CategoryFactory.getCategories();
      $scope.subcategories = CategoryFactory.getSubCategories();

    }
  );
})();

服务部分:

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http) {

      var categories = [];
      var subcategories = [];

      $http.get("../mockdata/categories.json").then(function (response) {
        categories = response.data;
      })
      $http.get('../mockdata/subcategories.json').then(function (response) {
        subcategories = response.data;
      })
      return {
        getCategories: function(){
          return categories;
        },
        getSubCategories: function(){
          return subcategories;
        }
      }
    }
  );
})();

这是我在 WORKING 版本 中的代码，首先是带有 Controller 的主模块:

/** Main module of the application. */
(function() {
  'use strict;'
  angular.module('angularRegelwerkApp', [])
    .controller('RegelwerkCtrl', function ($scope, CategoryFactory) {

      $scope.categories = [];
      $scope.subcategories = [];

      CategoryFactory.getCategories().then(function(response) {
        $scope.categories = response.data;
      });
      CategoryFactory.getSubCategories().then(function(response) {
        $scope.subcategories = response.data;
      });
    }
  );
}
)();

服务部分:

(function () {
  'use strict';
  var app = angular.module('angularRegelwerkApp')
    .service('CategoryFactory',
    function ($http, $q) {

      var categoryURL = "../mockdata/categories.json";
      var subcategoryURL = '../mockdata/subcategories.json';

      function getSubCategories() {
        return $http.get(subcategoryURL);
      }
      function getCategories() {
        return $http.get(categoryURL);
      }
      return {
        getCategories: getCategories,
        getSubCategories: getSubCategories
      }
    }
  );
})();

Answer 1

这会破坏您的引用，因此循环遍历来自服务器的数据并将其推送到您需要的变量中:

  $http.get("../mockdata/categories.json").then(function (response) {
    for(var x = 0; x < response.data.length; x++){
        categories.push(response.data[x]);
    }
  });