Введенные данные Angularjs должны показать ссылку

Question

У меня есть данные, поступающие с сервера, содержащего ссылки href. когда я вставляю его в шаблон, он показывает код, а не ссылку. как html не интерпретируется. Вот codepen.

JS:

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

и шаблон

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

Как может этот код показывает, абзац с ссылкой?

Answer 1

Вы должны использовать нг-привязку и $ SCE. $ sce сообщит вашему приложению, что HTML доверен. При этом, если вы не доверяете HTML, который вы получаете, вы должны быть осторожны, делая это (то есть, если это от пользователей, которых вы не можете доверять). Вы также можете посмотреть, как это сделать.

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 2

вам нужно использовать ng-bind-html

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

Пожалуйста, обратитесь $sce тоже, потому что вам нужно, чтобы избежать ваш контекст с

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

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> 

[...]