渲染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>