AngularJS - 使用 REST API 调用加载图像

Question

我正在编写一个需要显示汽车库存的应用程序。我 ping 一个 API 以获取所有符合搜索条件的汽车，例如汽车制造商、型号和年份。我需要显示每辆车的图像以及其他信息。一旦 JSON 数据可用，它还会在我的结果中为每辆汽车提供一个 ID (StyleID)，我需要使用它来进行另一个 API 调用以请求该汽车的图像。

在阅读了几篇文章 (such as this one) 后，我想我需要使用自定义指令，以便在循环结果时查询并将每辆车的图像插入特定位置。

我阅读了 Jim Lavin 的 custom directive tutorial 来创建我的示例。我希望这种方法能够奏效，但是我必须遗漏一些东西，因为它根本不执行我的自定义指令并按照我的意愿显示汽车图像。

有人可以帮忙吗？

---

这是显示我的代码的 plunker： http://plnkr.co/edit/5DqAspT92RUPd1UmCIpn?p=preview

这是关于我正在尝试使用的 specific media call to Edmunds API 的信息。

这是URL to the media endpoint

---

重复我的代码：

我的 HTML 代码：

<div firstImageOfMyCar data-styleid="style.id"></div>

或

<firstImageOfMyCar data-styleid="style.id"></firstImageOfMyCar>

这是我的自定义指令：

// Custom Directive to get first image of each car.
  app.directive('firstImageOfMyCar', function() {
    return {
      restrict: "E",
      link: function(scope, elm, attrs) {
        // by default the values will come in as undefined so we need to setup a
        // watch to notify us when the value changes
        scope.$watch(attrs.styleid, function(value) {
          //elm.text(value);

          // let's do nothing if the value comes in empty, null or undefined
          if ((value !== null) && (value !== undefined) && (value !== '')) {

            // get the photos for the specified car using the styleID.
            // This returns a collection of photos in photoSrcs.
            $http.get('https://api.edmunds.com/v1/api/vehiclephoto/service/findphotosbystyleid?styleId=' + value + '&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd')
              .then(function(response) {
              $scope.photoSrcs = response.photoSrcs;

              // construct the tag to insert into the element.
              var tag = '<img alt="" src="http://media.ed.edmunds-media.com' + response.photoSrcs[0] + '" />" />'
              // insert the tag into the element
              elm.append(tag);
            }, function(error) {
              $scope.error3 = JSON.stringify(error);
            });
          } 
        });
      }
    }; 
  });

Answer 1

Angular 规范化元素的标签和属性名称以确定哪些元素匹配哪些指令。我们通常通过区分大小写的 camelCase 规范化名称（例如 ngModel）来引用指令。然而，由于 HTML 不区分大小写，我们在 DOM 中使用小写形式引用指令，通常在 DOM 元素上使用破折号分隔的属性（例如 ng-model）。

试试

<div first-image-of-my-car data-styleid="style.id"></div>

或

<first-image-of-my-car data-styleid="style.id"></first-image-of-my-car>

注意：如果您使用第一个属性，您需要将指令中的限制更改为restrict: "A",（或"AE" 以涵盖这两种情况）

另外，$http 和$scope 未在您的指令中定义。您可以简单地将$http 添加到指令函数中，DI 将注入它。您可能想使用scope 而不是$scope。

提供的示例还存在一些其他问题。这是一个工作版本：http://plnkr.co/edit/re30Xu0bA1XrsM0VZKbX?p=preview

注意$http的.then()会用data, status, headers, config调用提供的函数，数据会有你要找的响应。 (response.data[0].photoSrcs[0])

Answer 2

请看@TheScharpieOne 的回答。但我也玩弄了你的代码和 api。我想补充一点，您的代码可能会受益于使用角度服务来包装 api 调用。

这是一个服务示例：

app.service('VehicleService', function ($q, $http) {

this.getAllMakes = function () {
    var deferred = $q.defer();
    var url = 'https://api.edmunds.com/api/vehicle/v2/makes?state=new&view=basic&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd'
    $http.get(url).then(function (response) {
        deferred.resolve(response.data.makes);
    }, function (error) {
        deferred.reject(new Error(JSON.stringify(error)));
    });
    return deferred.promise;
}

this.getCar = function (makeName, modelName, year) {
    var deferred = $q.defer();
    var url = 'https://api.edmunds.com/api/vehicle/v2/' + makeName + '/' + modelName + '/' + year + '?category=Sedan&view=full&fmt=json&api_key=mexvxqeke9qmhhawsfy8j9qd'
    $http.get(url).then(function (response) {
        deferred.resolve(response.data);
    }, function (error) {
        deferred.reject(new Error(JSON.stringify(error)));
    });
    return deferred.promise;
};

});

你可以这样使用它：

function CarCtrl($scope, VehicleService, VehiclePhotoService) {
// init make select
VehicleService.getAllMakes().then(function (value) {
    $scope.makes = value;
});

$scope.getCars = function () {
    VehicleService.getCar($scope.make.niceName, $scope.model.niceName, $scope.year.year)
        .then(function (value) {
        console.log(value);
        $scope.myCars = value;
    })
}
}

这是一个完整的工作 jsfiddle：http://jsfiddle.net/gkLbh8og/