Учитывая строку в моей модели $ scope, которая содержит объект HTML, как я могу гарантировать, что объект будет правильно отображаться как символ HTML, а не буквальная строка?Использование HTML-объектов в пределах угловых строк

http://plnkr.co/edit/0BliljcDkj0vvj3jdEqz?p=preview

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]*" 
      data-semver="1.2.13" 
      src="http://code.angularjs.org/1.2.13/angular.js"></script> 

    </head> 

    <body> 
    <div ng-controller="htmlChar">{{title}}</div> 

    <script> 

     angular.element(document).ready(function(){ 

     var app=angular.module("app",[]); 
     app.controller("htmlChar",function($scope){ 
      $scope.title = "&copy; Acme"; 
     }); 
     angular.bootstrap(document, ['app']); 

     }); 

    </script> 

    </body> 
</html>

источник

2014-02-20 mccainz

что вы имеете в виду HTML сущности? –

Символьный объект, © например. http://www.w3schools.com/html/html_entities.asp – mccainz

С $sce. Вам нужно явно указать угловое содержание html.

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

<script> 

    angular.element(document).ready(function(){ 

    var app=angular.module("app",[]); 
    app.controller("htmlChar",function($scope, $sce){ 
     $scope.title = $sce.trustAsHtml("&copy; Acme"); 
    }); 
    angular.bootstrap(document, ['app']); 

    }); 

</script>

http://plnkr.co/edit/9iNnRC7AxFptnQZLPtYR?p=preview

источник

2014-02-20 21:07:24 romainberger

и он должен использовать ng-bind-html – michael

Да, Майкл прав. Я был просто ленив и привязан только к plnkr, извините :( – romainberger

и для ng-bind-html для работы вам нужна угловая дезинфекция –

Вы сделать не необходимости $sce связывать строки с HTML. Все, что вам нужно, это ввести ngSanitize в ваше приложение (это не основной модуль), а затем использовать директиву атрибута ng-bind-html.

JavaScript

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

app.controller('MainCtrl', function($scope) { 
    $scope.title = '&#189; Cookies &amp; <span class="cream">Cream</span>'; 
});

Html

<div ng-bind-html="title"></div>

Plunkr

источник

2016-02-18 15:04:02

Использование HTML-объектов в пределах угловых строк

ответ

Plunkr

Смежные вопросы