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

标签 javascript json angularjs api rest

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

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

我读了这个custom directive tutorial由 Jim Lavin 创建我的样本。我希望这种方法能够发挥作用,但是我一定错过了一些东西,因为它根本不执行我的自定义指令并按我想要的方式显示汽车图像。

有人可以帮忙吗?

<小时/>

这是显示我的代码的插件: 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);
            });
          } 
        });
      }
    }; 
  });

最佳答案

Angular 规范元素的标签和属性名称,以确定哪些元素与哪些指令匹配。我们通常通过区分大小写的驼峰式规范化名称(例如 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 就会注入(inject)它。您可能想使用 scope 而不是 $scope

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

请注意,$http.then() 将使用 data、status、headers、config 调用提供的函数,data 将得到您正在寻找的答复。 (response.data[0].photoSrcs[0])

关于javascript - AngularJS - 使用 REST API 调用加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26000436/

相关文章:

iphone - JSON - iPhone SDK 上的框架错误

javascript - Protractor 找不到 Angular

javascript - 如何从 angularJS 模板调用 encodeURIComponent?

javascript - 如何在按钮单击 React.js 时运行警报

javascript - id 标签导致音频无法在 chrome 中播放

javascript - ReactJS:如何按顺序映射 JSON 元素并在单击时显示隐藏的 div

javascript - 在不使用循环或 jQuery 的情况下获取数组或 JSON 中选择的选项值列表

json - 如何读取折叠的 UTF-8 字符串

angularjs - 如何将数组传递到指令而不将其转换为字符串?

javascript - AngularJS - 即使数组中只有一项,循环也会错误地递增