带角度的数据绑定 JSONP答案

【问题标题】：Databinding JSONP with angular带角度的数据绑定 JSONP
【发布时间】：2016-09-24 06:43:48
【问题描述】：

所以我正在调用 API 并接收 JSONP 格式的数据。我正在尝试使用角度数据绑定（例如 ng-bind）或使用双括号等来绑定这些数据。但是，对于我收到的每个对象，我都会得到一个完整的 html 标记的图像代码，如下所示：

[object]
description: "this is a description"
image_code:"<img src='https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737'>"

有没有人知道我将如何绑定它，以便为每个对象绑定 src 与给定的图像代码？

我试过这样

<img ng-src={{object.image_code}}>

但它不起作用。任何帮助或想法将不胜感激。谢谢！

【问题讨论】：

所以，在寻找更多并试图弄清楚之后。使用 sanitize 将图像链接绑定到 div 效果非常好。我认为这是为了我的目的而做到这一点的最佳方式。我刚刚使用了 sanitize 并做了一个 ng-bind-html 来使其工作

标签： angularjs data-binding jsonp

【解决方案1】：

因为您的对象将图像作为字符串。您需要在控制器中提取它的 url 部分。

data = {
description : "something",
image_code : "<img src='https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737'>"
};

然后在控制器中使用正则表达式提取url部分。

$scope.image_url = data.image_code.match(/http.*(?=')/g).join();

现在您的 $scope.image_url 将具有："https://s3.amazonaws.com/p.image.slated.com/film/67/25/59510/1_small.jpg?get=1398992737" 作为值。

现在您可以将其用作：

<img ng-src="{{image_code}}">

【讨论】：

【解决方案2】：

尝试关注

<img ng-src="{{object.image_code}}">

{{object.image_code}} 应该包含在 " " 中，但您的代码中显然没有。

plnkrworking example

【讨论】：

把它包在" "里面不会有影响。