Question

我正在尝试在Angular视图中显示HTML字符串。

起初，我天真地尝试过这个：

<p>{{ad.text}}</p>

$scope.ad = { 'text' : '<a href="#">Link</a>'}; // Dynamically fetched, etc. This is just an example text

但这只是在视图中显示<a href="#">Link</a>，而不是：link。

经过一番研究，我偶然发现了ngSanitize。我尝试过，但它完全剥离了所有HTML代码，只留下原始文本。确实非常安全。实际上有点太多了。无论如何， ngSanitize现已过时。

This SO post表示现在必须使用$ sce服务而不是ngSnitize。

遵循这些不同的解决方案，这就是我想出的：

HTML

<p ng-bind-html="htmlAdText"></p>

JS

$scope.ad = { 'text' : '<a href="#">Link</a>'};

$scope.htmlAdText = $sce.trustAsHtml($scope.ad.text);

但是这个错误出现在控制台中：

ReferenceError: $sce is not defined

我的错误是 $ sce服务应该是自v1.2以来Angular核心的一部分，而我正在使用v1.3.9 。

这里发生了什么？有没有人有一个明确的方法在AngularJS视图中显示HTML（没有只留下原始文本的过滤器）？

Answer 1

不要忘记将其注入控制器，例如：

app.controller('mainCtrl', [ '$scope', '$sce', function($scope, $sce){
    $scope.ad = { 'text' : '<a href="#">Link</a>'};
    $scope.htmlAdText = $sce.trustAsHtml($scope.ad.text);
}]); //End Controller

使用$ sce在Angular 1.3.9视图中显示HTML

1 个答案: