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

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>在视图中显示,而不是:链接.

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

此SO帖子表明现在必须使用$ 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