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/

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

2 个答案: