Getting img src from json data when using AngularJS ng-bind-html

Question

So, I had an interesting question, to which I could not find an answer.

Let's say I have a bunch of data coming from a JSON file like, but somehow one of the main fields looks like this:

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...'

How can I get src from this IMG when using ng-bind-html to bind json data to innerHTML on my page. (using display: none; on img itself so that it doesn't display)

I tried getElementsByTags etc. but nothing returned a valid value.

Is there a way to "angular" do this or ...?

BR's

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

angular - , .

- :

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

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

jsfiddle, . .

: , @lucuma URL: http://jsfiddle.net/LxK7W/2/