Use of ngsanitize with css

Question

While using ngsanitize. It displays only html without css applied.

For example: The above image should be the output but using ngsanitize ,it displays only the text

What could be added with ngsanitize to display elements with proper css.

<p ng-bind-html ="the text to be displayed(test video)"></p>

Answer 1

if i understood your question correctly, fiddle

you can use $sce.trustAsHtml(), to use inline style directly into the html string, you could do it like this, controller:

$scope.trustAsHtml = function(string) {
    return $sce.trustAsHtml(string);
};

And in HTML

<div data-ng-bind-html="trustAsHtml(htmlString)"></div>

Answer 2

Please try with $sce. Before binding it to the scope variable that you use for ng-bind-html. An example below

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

And in your controller

$scope.styledHTML = $sce.trustAsHtml('<span style="background-color: cyan;">test video</span>');