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

我正在尝试使用ng-src从动态ng-bind-html显示一些图像。这是小矮人：
http://plnkr.co/edit/EmHSUEbVTdUT7cqJ0nX6?p=preview

但是图像没有被渲染。如何使其工作？

目的是，我想从数据库加载一些html元素，并使用ng-bind-html显示它们。有时这些元素是图像（包含ng-src属性），有时它们是<i></i>元素（正确呈现）。

最佳答案

使用$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);
});

从documentation：


  $interpolate将带有标记的字符串编译为插值函数。 HTML $ compile服务使用此服务进行数据绑定