Binding Controller Свойство, содержащее HTML в AngularJS

Question

Прежде всего: я абсолютно не знаком с AngularJS, но работал над MVC-проектами на других языках.

Я пытаюсь связать свойство, содержащее HTML.

Это код:

HTML:

<div ng-controller="MyController"> 
<p>{{About}}</p> 
</div> 

JS:

.controller('MyController', ['$scope', function($scope) { 
$scope.About="This is me<br/>and not you!" 
} 

Теперь HTML закодирован, который я не хочу (<br/> должно привести к разрывам линии)

Я уже пробовал <p ng-bind-html="About"></p>, но это привело к не выводится вообще

Answer 1

Вы должны разрешить HTML в вашем тексте, который Угловой не делает по умолчанию.

Plunker: http://plnkr.co/edit/K4KRCQi4Rpe99MJel5J2?p=preview

Angular Docs for $sce

Строгая контекстная вытекание (SCE) представляет собой режим, в котором AngularJS требует привязок в некоторых контекстах приводит к значению, которое помечено как безопасной для использования этот контекст. Одним из примеров такого контекста является привязка произвольного html, управляемого пользователем через ng-bind-html. Мы ссылаемся на эти контексты как привилегированные или контексты SCE.

<div ng-controller="htmlChar" ng-bind-html="about"></div> 

<script> 

    angular.module("app",[]) 
    .controller("htmlChar",function($scope, $sce){ 
    $scope.about= $sce.trustAsHtml("This is me<br/>and not you!"); 
    }); 

    angular.bootstrap(document,["app"]); 

</script> 

Answer 2

Вам не нужно вставлять html через привязку к модели в AngularJS, так как философия фреймворка заключается в том, чтобы сохранить структуру (стиль и структуру страницы) неповрежденными и привязывать только данные, которые будут отображаться внутри этого HTML-кода ,

Если вам действительно нужно привязать теги HTML к вашим данным, вам необходимо использовать $sanitize service.

Answer 3

Вы должны использовать угловую функциональность компиляции здесь, перейдите по ссылке, чтобы получить больше информации angular compile