javascript - AngularJS Edmunds REST API 调用 - 加载下拉菜单不起作用

Question

我正在尝试查询 Edmunds.com REST API 以根据品牌和型号下拉汽车。

在我的示例中，我只是想 ping 他们的 API 以获取所有品牌并在下拉列表中显示它们。选择品牌后，我想获取该品牌的所有模型的列表，并使用它加载模型下拉列表。

我无法让它工作。我认为我的 carController 有问题。我在 Chrome 调试器中看到的错误是“参数‘carController’不是一个函数，未定义”。我确实有 carController 但由于某种原因它不喜欢它。有人可以告诉我我做错了什么吗？

这是一个骗子: http://plnkr.co/edit/h0zAInSk1wIo0PRQNxGL?p=preview

//carController.js
    (function() {
  var app = angular.module('AngularSamples', []);

    var carController = function($scope, $http) {
      // get all the makes
        $http.get('https://api.edmunds.com/api/vehicle/v2/makes?state=new&view=basic&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd')
        .then(function (response)
              {
                $scope.makes = response.data;
                }, function (error) {
                $scope.error1 = JSON.stringify(error);
                });

        // for each make - get all the models.
        $scope.getmodels = function(make) {
            $http.get('https://api.edmunds.com/api/vehicle/v2/"+make+"/models?state=new&view=basic&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd')
        .then(function (response)
              {
                $scope.models = response.data;
                }, function (error) {
                $scope.error2 = JSON.stringify(error);
                });
        };

        app.controller('carController', ['$scope', '$http', carController]);
    };
})();

这是我尝试点击并取回 JSON 的 API 链接: https://api.edmunds.com/api/vehicle/v2/makes?state=new&year=2014&view=basic&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd

Answer 1

这实际上是一个简单的错误，当你看到问题所在时你会踢自己的。交换这两行:

    app.controller('carController', ['$scope', '$http', carController]);
};

阅读:

};

app.controller('carController', ['$scope', '$http', carController]);

您将 carController 定义为上面示例顶部附近的 var。但随后您尝试从内部使用它。您只需要将这行代码移至 Controller 外部即可。

顺便说一句，你的 Plnkr 由于一个额外的错误而无法工作，但我假设这只是一个剪切/粘贴问题 - 你要求 js/carController.js 但在 Plunkr 中该文件位于顶层。

我在此 Plnkr 中修复了您的一两个其他小问题。品牌选择器现在可以工作了。模型不是，但这是因为 API 为您正在使用的查询返回一个空数组 - 我不知道这个 API，因此您需要检查网络请求并修复任何问题。

http://plnkr.co/edit/BGY76tIXhprPWgt5aphx?p=preview