在使用 AngularJS ng-bind-html 时从 json 数据中获取 img src

Posted 2023-03-05

【中文标题】在使用 AngularJS ng-bind-html 时从 json 数据中获取 img src

【英文标题】：getting img src from json data while using AngularJS ng-bind-html

【发布时间】：2014-07-25 02:38:28

【问题描述】：

所以我遇到了一个有趣的问题，但我还没有找到答案。

假设我从 JSON 文件中获得了一堆数据，但不知何故其中一个主要字段看起来像这样

description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...'

如何在使用 ng-bind-html 将 json 数据绑定到页面上的 innerHTML 时从该 IMG 获取 src。 （使用 display:none; 在 img 本身上，所以它不会显示）

我尝试过 getElementsByTags 等，但没有返回有效值。

是否有某种“角度”的方式来做到这一点或......？

BR

【参考方案1】：

根据存储在对象中的 html，您可以这样做：

var json = description : '<img src="http://o.aolcdn.com/hss/storage/midas/37c38989a5f26031be3e0ec5ffc5cd2/200012386/got-hbo-go-crash-2014-04-07-01_thumbnail.jpg"/> Viewing of the Game of Thrones season debut came to a crashing halt yesterday thanks to server problems with HBO Go. The cable outfit first reported the problem late yesterday via Twitter, and finally restored full service early this morning. That...';

  $scope.imgPath = '';

  $scope.getImage = function() 
    el = angular.element(angular.element('<div>' + json.description + '</div>').find('img')[0]);
    $scope.imgPath = el.attr('src');

  

这是一个演示：http://plnkr.co/edit/JXy97lrN5FyW1MK33qO1?p=preview

此解决方案假定项目中不包含 jQuery。

这也有效：

 $scope.imgPath = angular.element(json.description).attr('src');

演示：http://plnkr.co/edit/zVllp9bmsU2DoZwDZnCY?p=info

【参考方案2】：

这样做的角度方法是编写一个过滤器来进行您需要的按摩。

类似这样的：

<div ng-bind-html="data | extractSrcUrl"></div>

然后

app.filter('extractSrcUrl', function () 
  return function (text) 
      var output = awesomeRegexExtractionStuff(text); // fill this in
      return output;
  
);

我尝试了一个 jsfiddle，但我无法完全正确地使用正则表达式。 Here it is anyway.

编辑：我使用@lucuma 提取网址的方式更新了我的小提琴：http://jsfiddle.net/LxK7W/2/

【讨论】：

这很好，但假设它在描述中有超过 1 个图像。它不会返回任何东西。这是为什么。它不应该返回至少一个值吗？

当我玩弄它时，它似乎仍然返回一个。你能发布失败的html吗？我还制作了另一个获取所有图像源的 jsfiddle。现在它只是连接它们，但它可能是一个有用的开始。 jsfiddle.net/LxK7W/3