Question

我试图将JSON数据导入angularJS应用程序。我将我的应用程序拆分为控制器和导入服务，但两者都在不同的文件中。我也使用凉亭，咕噜声和自耕农（由于工作原因，我不习惯这些，也许还有问题。）

奇怪的行为是：

我想用$ http.get（）检索JSON数据并解决它 - 所有这些都在服务中，这样我就可以将数据对象从那里分发给主控制器并且不必在那里解决它。奇怪的是，我没有得到任何数据，它是空的或不可读的。然后我发出了$ http.get（）mehtod给出的承诺，并在控制器中解析了它。这不是我想要的，但现在它有效......但为什么呢？

我猜这是一个骗子，但我和我的团队成员都找不到。奇怪的是，做一个没有咕噜声的小测试应用程序，自耕农和凉亭它起作用了。

我很欣赏每一个暗示或想法...... 亚娜

这是 NOT working version 中的代码，首先是带控制器的主模块：

/** 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版本中的代码，首先是带控制器的主模块：

/** 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]);
    }
  });

Answer 2

$ http调用默认是异步的。

所以在你的第一个版本中，当你写作$scope.categories = CategoryFactory.getCategories();时你得到空类别，因为当你访问类别时，它可能没有加载响应数据。

你的应用就像这样 -

您加载控制器
您致电服务
服务电话$ http
您尝试访问类别（但在从服务器返回响应之前，数据将不可用）
$ http.then将数据加载到$ scope.categories

Answer 3

您将数据存储在Angular基元中，并且这些基元不会更新。而是将所有数据存储在一个对象中，并且它可以工作（您还需要更新控制器）

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

      var data = {};

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

Angular JS：使用$ http.get（）导入JSON数据 - 在控制器中工作，不在服务中 - 为什么？

3 个答案: