Angularjs嵌入数据应该显示一个链接

Question

我的数据来自包含href链接的服务器。当我将它嵌入模板时，它会显示代码，而不是链接。喜欢html不解释。这是codepen。

JS：

$scope.link = "<a href=''></a>";

和模板

<p>{{link}}</p>

此代码如何显示带链接的段落？

Answer 1

您需要使用ng-bind-html

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

请参阅$sce，因为您需要使用

转义上下文

$scope.link = $sce.trustAsHtml("<a href=''></a>");

Answer 2

您需要使用ng-bind和$ sce。 $ sce将告诉您的应用HTML是可信的。话虽这么说，如果你不相信你得到的HTML，你应该小心这样做（即如果这是来自你不一定信任的用户。）你可能还想看看这个消毒。 / p>

<强> HTML

<div ng-app="SOAngular" ng-controller="mainController">
  This should be a link and not pure text.
  <p ng-bind-html="link"></p>
</div>

<强> JS

app.controller('mainController', function($scope,$sce) {
  $scope.link = $sce.trustAsHtml("<a href=''>test</a>");
});

我在这里用一个解决方案分解你的例子：http://codepen.io/anon/pen/WxvOEX

参考

• https://docs.angularjs.org/api/ng/service/$sce
• https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 3

让我们说一个带有html的范围变量！

$scope.link = "<h1>Big Nice Link here</h1>";

你应该可以输出它

<div ng-bind-html-unsafe="someHTML"></div>

..在你的情况下它应该是这样的

[...]

<div class="item item-text-wrap" ng-bind-html-unsafe="link"></div>

[...]

也尝试这种方式：

[...]

<div class="item item-text-wrap" ng-bind-html="link"></div>

[...]