current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 3 down vote favorite

So I got a interesting question to which I haven't found a answer to.

Let's say I got 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 would I be able to get the src from that IMG while using ng-bind-html to bind the json data to the innerHTML on my page. ( using display:none; on the img itself so it would'nt display )

I have tried getElementsByTags and so on, but nothing returned a valid value.

Is there some kind of "angular" way to do it or... ?

BR's

share|improve this question
up vote 2 down vote accepted

Based on the html stored in the object you could do this:

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');

  }

Here is a demo: http://plnkr.co/edit/JXy97lrN5FyW1MK33qO1?p=preview

This solution assumes jQuery isn't included in the project.

This also works:

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

Demo: http://plnkr.co/edit/zVllp9bmsU2DoZwDZnCY?p=info

share|improve this answer
    
This should be the accepted answer. – U r s u s Jul 21 '15 at 10:09
up vote 2 down vote

The angular way of doing this would be to write a filter that does the massaging that you need.

Something like this:

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

and then

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

I attempted a jsfiddle but I couldn't quite get the regex right. Here it is anyway.

Edit: I updated my fiddle using @lucuma's way of extracting the url: http://jsfiddle.net/LxK7W/2/

share|improve this answer
    
that's pretty good but let's say it has more then 1 image within the description. It Doesn't return anything then. Why is that. Shouldn't it return at least one value ? – user2831723 Jun 6 '14 at 13:57
    
It seemed to still return one when I played around with it. Can you post the html that failed? Also I made another jsfiddle that gets all the image sources. Right now it just concatenates them but it might be a useful start. jsfiddle.net/LxK7W/3 – Austin Thompson Jun 6 '14 at 16:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.