Question

我的控制器中有一个巨大的json对象，我想要将其分离到一个单独的文件中。到目前为止，我这样做：

myApp.controller('smController', ['$scope', function($scope) {
  ...
  var stadtmobilRates = {
    classic: {
      A: {
        night: 0,
        hour: 1.4,
        day: 21,
        week: 125,
        km000: 0.2,
        km101: 0.18,
        km701: 0.18
      },
      ...
    }
  };

我在Stackoverflow上使用了工厂和承诺，如here所述：

myApp.factory('stadtMobilRates', function($http) {
  var promise = null;

  return function() {
    if (promise) {
      // If we've already asked for this data once,
      // return the promise that already exists.
      return promise;
    } else {
      promise = $http.get('stadtmobilRates.json');
      return promise;
    }
  };
});

myApp.controller('smController', ['$scope', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

现在我在TypeError: undefined is not a function行获得了stadtMobilRates().success(function(data) {。尽管我已将stadtMobilRates工厂注入控制器，为什么不接受它？

编辑＃1：我已按照prawn的建议将工厂名称添加到数组中。

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {
  var stadtmobilRates = null;
  stadtMobilRates().success(function(data) {
    stadtmobilRates = data;
  });

  console.log(stadtmobilRates);

然而stadtmobilRates是null？

编辑＃2：我已在Plunker上创建了应用的简化版本。好吧它有效。在完整的应用中，我使用不同的路线，其中stadtmobilRates仍然是null。我无法使用路线创建完整应用的Plunker。所以这是GitHub上的完整代码。上面的代码来自Line 159。我想这与我的路线有关？

Answer 1

您忘记在数组中传递工厂的名称。通常，您传递一个数组，其元素由一个字符串列表后跟函数本身组成。确保数组与函数声明中的参数保持同步。这样，注入器知道要注入函数的服务。

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) {

修改

我就是这样做的...当使用路由时，我喜欢使用resolve，因此数据会被加载一次并被存储。所以在$routeProvider中，我会将smController部分更改为以下内容......

when('/sm', { templateUrl: 'partials/sm.html', controller: 'smController', resolve:{ load:function(stadtMobilRates){ return stadtMobilRates.LoadData(); } }).

我也修改了工厂

myApp.factory('stadtMobilRates', function ($q, $http) { var mobilRates = null; function LoadData() { var defer = $q.defer(); $http.get('stadtmobilRates.json').success(function (data) { mobilRates = data; defer.resolve(); }); return defer.promise; } return { GetData: function () { return mobilRates ; }, LoadData:LoadData } });

因此，在加载此路由之前，它将在工厂中调用LoadData函数。加载数据后，它会解析承诺，因此只会调用此LoadData函数一次。一旦承诺解决，它将继续并加载视图。

所以现在在你的控制器中，无论何时你想获取数据，你所要做的就是调用函数GetData

myApp.controller('smController', ['$scope', 'stadtMobilRates', function($scope, stadtMobilRates) { var stadtmobilRates = stadtMobilRates.GetData(); });

使用AngularJS工厂加载json数据

1 个答案: