Javascript 使用AngularJS ng绑定html时从json数据获取img src

Javascript 使用AngularJS ng绑定html时从json数据获取img src,javascript,html,json,angularjs,Javascript,Html,Json,Angularjs,所以我有一个有趣的问题,我还没有找到答案 假设我从一个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 Thro

所以我有一个有趣的问题,我还没有找到答案

假设我从一个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...'
description:“由于HBO Go的服务器问题,《权力的游戏》第一季的首映昨天突然停止。这家有线电视公司昨天晚些时候通过Twitter首次报道了这一问题,并最终在今天凌晨恢复了全面服务。那…'
在使用ng bind html将json数据绑定到页面上的innerHTML时,如何从该IMG获取src。(使用display:none;在img上显示,这样它就不会显示)

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

是否有某种“角度”的方式来做这件事或


BR的

基于对象中存储的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');

  }

演示:

做这件事的角度方法是编写一个过滤器来完成你需要的按摩

大概是这样的:

<div ng-bind-html="data | extractSrcUrl"></div>
我尝试了一个jsfiddle,但是我不能完全正确地使用正则表达式


编辑:我使用@lucuma提取url的方法更新了我的小提琴:

这很好,但假设它的描述中有不止一个图像。那它就什么也不回了。这是为什么。它不应该至少返回一个值吗?当我使用它时,它似乎仍然返回一个值。你能发布失败的html吗?此外,我还制作了另一个JSFIDLE,用于获取所有图像源。现在它只是将它们连接起来,但这可能是一个有用的开始。
<div ng-bind-html="data | extractSrcUrl"></div>
app.filter('extractSrcUrl', function () {
  return function (text) {
      var output = awesomeRegexExtractionStuff(text); // fill this in
      return output;
  }
});