Question

当我尝试在角度JS和渲染中添加标记时，它不会显示图像，而是显示img代码。这是我的Angular JS代码

$scope.option = '<img src="smiley.gif" alt="Smiley face" height="42" width="42">';
    responsePromise.success(function(data, status, headers, config) {
        for(index in data) {
            $scope.usersArray.push({
                name:data[index].name,
                password:data[index].password,
                option:$scope.option
            });
        }           
    });

我的HTML代码

<tr ng-repeat="user in usersArray">
   <td><span ng-model="user.name">{{user.name}}</span></td>
   <td><span ng-model="user.password">{{user.password}}</span></td>
   <td><span ng-model="user.option">{{user.option}}</td>
</tr>

除标签外，其他细节都很顺利。我需要在这里添加额外的东西吗？

Answer 1

您可以尝试使用bindHTML指令。

Html：

<div ng-controller="ngBindHtmlCtrl">
 <p ng-bind-html="myHTML"></p>
</div>

控制器：

angular.module('ngBindHtmlExample', ['ngSanitize']).controller('ngBindHtmlCtrl', ['$scope', function ngBindHtmlCtrl($scope) {
  $scope.myHTML =
     'I am an <code>HTML</code>string with <a href="#">links!</a> and other <em>stuff</em>';
}]);

Doc：http://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 2

尝试：

$scope.option =  $sce.trustAsHtml('<img src="smiley.gif" alt="Smiley face" height="42" width="42">');

您需要注入$sce。

什么是$ sce？

$ sce是一种为AngularJS提供严格上下文转义服务的服务。严格上下文转义（SCE）是一种模式，其中AngularJS需要在某些上下文中进行绑定，以产生一个标记为可安全用于该上下文的值。

参考：http://docs.angularjs.org/api/ng/service/ $ sce

Answer 3

您不应该在控制器中处理HTML，而应该处理结构化数据。您应该在视图中生成HTML：

控制器：

$scope.option = {
    src: 'smiley.png',
    alt: 'Smiley face',
    width: 42,
    height: 42
};
responsePromise.success(function(data, status, headers, config) {
    for(index in data) {
        $scope.usersArray.push({
            name:data[index].name,
            password:data[index].password,
            option: $scope.option
        });
    }           
});

视图：

<tr ng-repeat="user in usersArray">
   <td><span ng-model="user.name">{{user.name}}</span></td>
   <td><span ng-model="user.password">{{user.password}}</span></td>
   <td><span ng-model="user.option">
       <img ng-src="{{ user.option.src }}" alt="{{ user.option.alt }} width="{{user.option.width}}" height="{{user.option.height }}" />
   </td>
</tr>

无法使用Angular JS在浏览器中呈现html代码

我的HTML代码

3 个答案: