在Angularjs中渲染HTML和CSS

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

下载文件-angular-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.html ：

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