我正在编写一个需要显示汽车库存的应用程序。我 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 的信息我正在尝试使用它。
<小时/>重复我的代码:
我的 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/