Angularjs在视图中将字符串转换为html

Question

我目前正在尝试在我的视图中添加链接。我的链接基本上包含html标签作为字符串。 我试过了：

<p data-ng-repeat='i in links' >{$ i.link $}</p>

基本上只是在我的视图中部署：mylink

所以我尝试了：

<p data-ng-repeat='i in links' ><span data-ng-bind-html="i.link"></span></p>

它不起作用，任何想法我怎么能实现这一点？

感谢。

Answer 1

添加$ sce作为模块的依赖

angular.module('myApp', ['$sce']);

获取链接时

angular.forEach($scope.links, function(value){
    value.link = $sce.trustAsHtml(value.link);
});

使用安全上下文转义（docs.angularjs.org/api/ng/service/$sce）并使用trustAs委托您告诉Angular该值在该上下文中可以安全使用。在这个例子中。 $ sce.trustAsHtml返回一个角度可以信任的对象，可以像HTML一样安全。

Answer 2

在第一种情况下，您实际上想要使用：

<p data-ng-repeat='i in links' >{{ i.link }}</p>

双支撑，不支撑美元。在第二种情况下，ng-bind-html将要求您已将“ngSanitize”添加到模块的依赖关系列表中。

angular.module('yourAppNameHere', ['ngSanitize'])

修改：

如果你确实想要在页面上点击可点击的链接，那么就像@sreeramu建议的那样做（虽然我看看你是否找不到添加好描述的方法）：

<p data-ng-repeat='i in links' ><a ng-href="{{i.link}}">{{i.desc}}</a></p>

（请注意，他建议使用ng-href，而不是href。他是对的。）

Answer 3

将ngSanitize作为依赖项插入您的应用：

angular.module('myApp', ['ngSanitize'])

但在确保包含脚本angular-sanitize.js之前。 祝你好运！

Answer 4

可能是您的链接已经有了标记，所以在这种情况下您不需要重新添加标记...

在这种情况下，请执行此操作......

将此添加到您的脚本（包含符合您的角度版本）

<script type="text/javascript" 
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-
sanitize.min.js"></script>

将此添加到 app.js

var app = angular.module('modulename', [ 'ngSanitize']);

而不是你认为这样做 如果是你希望链接附加到div的div

<div ng-bind-html="i.link"></div>

上面会给你一些这样的东西

<div><a href='your link'></a></div>