Sirion Sirion - 5 months ago 13
AngularJS Question

Using ng-src with ng-bind-html

I am trying to show some image from dynamic

ng-src
using
ng-bind-html
. Here is the plunker:
http://plnkr.co/edit/EmHSUEbVTdUT7cqJ0nX6?p=preview

But the image isn't rendered. How to get it worked?

The purpose is, that I want to load some html-elements from DB and show them using
ng-bind-html
. Sometimes those elements are images (contain
ng-src
attribute) and sometimes they are
<i></i>
elements (which get rendered correctly).

Answer

Use $interpolate:

PLUNKER

app.controller("myCtrl", function($scope, $sce, $interpolate) {
    $scope.image = "https://upload.wikimedia.org/wikipedia/commons/5/57/Lorem_Ipsum_Helvetica.png";

    $scope.myText = $interpolate("My name is: <h1>John Doe</h1>" + "<img src='{{image | trustUrl}}'/>")($scope);
    $scope.trustedHtml = $sce.trustAsHtml($scope.myText);
});

From documentation:

$interpolate Compiles a string with markup into an interpolation function. This service is used by the HTML $compile service for data binding