Question

假设我有这个html和javascript：

$scope.test = "hello<br/>world";
<div>{{ test }}</div>

angular显然会将其显示为：

<div>hello<br/>world</div>

这正是它应该如何工作但是，如果我希望它实际上将它呈现为html标记而不是文本呢？

我知道这可能会导致安全问题，但我只是想知道好奇心。

提前致谢。

Answer 1

您可以在AngularJS中使用ng-bind-html指令。

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

其中

$scope.myHTML = "I am an <code>HTML</code>string with <a href="#">links!</a>"

将相应地呈现。

对于此中涉及的安全问题，在将HTML内容传递给范围变量myHTML之前，请使用以下方法对其进行清理：

$scope.trustedHtml = $sce.trustAsHtml($scope.html);

然后在上面列出的ng-bind-html指令中使用$ scope.trustedHtml。

Answer 2

您可以按建议here：

创建过滤器

HTML：

<div ng-controller="MyCtrl">
  <div ng-bind-html="my_html | to_trusted"></div>
</div>

这就是你的javascript出现的方式：

var myApp = angular.module('myApp',[]);

angular.module('myApp')
    .filter('to_trusted', ['$sce', function($sce){
        return function(text) {
            return $sce.trustAsHtml(text);
        };
    }]);

function MyCtrl($scope) {

    $scope.my_html = '<div>hello<br/>world</div>';
}

允许在角度的方括号内呈现html

2 个答案: