Angularjs Expression

Question

Я пытаюсь отобразить HTML-теги из данных в view.I есть данные level которое $scope.level="<b>i should be bold</b>" и когда данные приведены в шаблоне, как указано ниже, должны соблюдать HTML тег, а

<div ng-controller="MyCtrl" > 
{{level}} 
</div> 

, что он должен быть смелым без использования

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2"> 
<b>{{level}}</b> 
</div> 

Но с тем, что я пытался до сих пор я не могу для того чтобы достигнуть it.It также показывает метку в вопросе view.The иллюстрируется на это JSFiddleHere.

В любом случае, чтобы достичь этого. Или я совершенно не прав здесь?

Answer 1

Вы можете использовать ngBindHtml директиву, которая вычисляет выражение и вставляет результирующий HTML в элемент. Не забудьте включить в директиву ngSanitize.

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Пример:

app.js

angular.module('app', ['ngSanitize']) 
.controller('Controller', function($scope) { 
    $scope.data = '<b>my text</b>' 
}); 

index.html

<div ng-controller="Controller"> 
<p ng-bind-html="data"></p> 
</div> 

Answer 2

Почему вы не можете переместить теги <b> на разметку, а затем просто интерполировать значение «уровень»?

http://jsfiddle.net/u37xtpjd/2/

Answer 3

Вы можете использовать ng-bind-html-unsafe:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2"> 
    <div ng-bind-html-unsafe="level"></div> 
</div> 

небезопасная, поскольку DOM не должен вообще быть изменен внутри контроллера.

Answer 4

Вы можете сделать это, используя ng-bind-html директиву:

<div ng-controller="MyCtrl" id="tableForVxp" class="dataDisplay2"> 
    <span ng-bind-html="level"></span> 
</div>