Question

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

假设我从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的

Answer 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

Answer 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/

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

2 个答案: