在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>