Рендеринг HTML и CSS в Angularjs

Question

если у меня есть контроллер с областью

$scope.post.description = "<style>#bo{font-weight:bold}</style> <h5 id='bo'> HI</h1> <p>My name is bamidele</p>";

Как я могу вынести это в представлении. он должен оказывать как HTML и CSS

Я попытался

$ sce.trustAsCss ($ sce.trustAsHtml ($ scope.post.description));

, но оно не работает

Answer 1

Пожалуйста, проверьте этот рабочий пример: http://plnkr.co/edit/Guj3AuNrNNZ5F9EzkUxz?p=preview

Скачать файл - угловой sanitize.js и включить его в вашем приложении.

JS -

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

app.controller('myController', function($scope,$compile) { 
    $scope.html = '<p class="text-color">Your html code</p>'; 
}); 

HTML

<div ng-app="myApp"> 
    <div ng-controller="myController"> 
     <p ng-bind-html="html"></p> 
    </div> 
</div> 

CSS

.text-color { 
    color: #0000CC; 
} 

Answer 2

Поскольку ваше описание связываются с $scope, вы обычно сможете получить к нему доступ в представлении с двойной фигурные скобки обозначение {{}}:

<p> {{post.description}} </p> 
<!-- will generate "<style>#bo{font-weight:bold}</style> <h1 id='bo'> HI</h1> <p>My name is bamidele</p>"" --> 
<!-- Note : you started with a h5 tag but closed with a h1 tag in your question --> 

Это будет намного больше, чище и лучше практика, если вы разделите стиль, логику и содержание:

controller.js:

controller('DemoCtrl', ['$scope', function ($scope) { 
    $scope.description = '<h5 id='bo'> HI</h5> <p>My name is bamidele</p>'; 
}]) 

style.css:

#bo{ 
    font-weight: bold; 
} 

view.h tml:

{{post.description}} // will generate <h5 id='bo'> HI</h5> <p>My name is bamidele</p>