Image is not rendering as text, when I bind it with angular js model in UI

Question

I've created one jsfiddle for the same jsfiddle

sample HTML code

<div ng-app="myAppModule" ng-controller="someController">
<!-- Show the name in the browser -->
<!-- Bind the input to the name -->
<span ng-bind="showImage"></span>
</div>
<script>

</script>

sample angular js code

var myApp = angular.module('myAppModule', []);
myApp.controller('someController', function($scope) {
// do some stuff here
$scope.showImage="<a class='fancybox' href='http://i.imgur.com/9VFmFrN.jpg' data-fancybox-group='gallery' title='Personalized Title'><img class='MaxUploadedSmallSized' src='http://i.imgur.com/9VFmFrNs.jpg' alt=''></a>";

I'm trying to render image from angular js model on front end UI but it is coming as text.

I've tried $compile property of angular js too but that is not working too.

snapshot

enter image description here

You should not do it like this. HTML must be in HTML, not in JS. — dfsq
– dfsq, Commented Aug 20, 2014 at 11:19
If you want to show/hide something, put it in HTML and use ngShow/ngHide directives. You don't want to pollute JS with representation. — dfsq
– dfsq, Commented Aug 20, 2014 at 11:22

mainguy · Accepted Answer · 2014-08-20 11:39:25Z

1

Add a data structure to your controller that contains the relevant informations:

$scope.showImage=[];
$scope.showImage.Link='http://i.imgur.com/9VFmFrN.jpg';
$scope.showImage.Source='http://i.imgur.com/9VFmFrN.jpg';     
$scope.showImage.Title='Personalized Title';

The access it in your html as if you are using a template engine:

<div>
  <a class='fancybox' ng-href='{{showImage.Link}}' data-fancybox-group='gallery' title='{{showImage.Title}}'><img class='MaxUploadedSmallSized' ng-src='{{showImage.Source}}' alt=''></a>
</div>

Look here: Fiddle

answered Aug 20, 2014 at 11:39

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Image is not rendering as text, when I bind it with angular js model in UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related