结合使用ng-src和ng-bind-html

Question

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 1

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