Angularjs 如何在angular.js中显示HTML代码片段？

例如，我有一个模板，我想在该模板中显示

<div></div>

---

我希望它如上所示显示，而不是呈现实际的div

您将希望使用

$sanitize

无论哪种方式：

function MyCtrl ( $scope, $sanitize ) {
    $scope.rawHtml = "<div><script></script></div>";
    $scope.sanitizedHmtl = $sanitize( $scope.rawHtml );
}

---

有关更多信息，请参阅-这是我从中获得此信息的地方

根据Angular.js文档：

ng绑定有3个选项

ng bind html

-将输出经过净化的html，而不是转义的，它将正常呈现。JavaScript和其他“不安全”元素被剥离<代码>原始HTML将呈现

原始HTML

ng bind unsafe

-将绕过$sanitize并逐字输出HTML元素，而不是转义。包括任何可能不安全的脚本

ng bind

-将输出经过净化的转义HTML

Raw HTML

将输出

divRaw HTML/div

。浏览器将呈现

原始HTML

---

根据您的请求，#3最合适。

创建一个指令，将嵌套的HTML显示为文本：

module.directive（'renderNestedHtml'，function（）{
返回{
编译：函数（元素、属性）{
var rawHtml=元素[0]。innerHTML；
var代码=角度元素（“”）；
code.text（rawHtml.trim（））；
元素。替换为（代码）；
},
}
})

从我喜欢的解决方案的文档中看到这一点。。。对于html的长字符串，这使我能够在模板文件中编写字符串，而这不是问题所在。他不想插入DOM。他想插入文本。

<div ng-bind-html="rawHtml"></div>
<div ng-bind-html-unsafe="sanitizedHtml"></div>

element.html( scope.sanitizedHtml );

module.directive('renderNestedHtml', function() {
    return {
        compile: function(element, attrs) {
            var rawHtml = element[0].innerHTML;
            var code = angular.element('<pre></pre>');

            code.text(rawHtml.trim());
            element.replaceWith(code);
        },
    }
})