angularjs的強大之處之一在於它的雙向數據綁定的功能，我們通常會使用data-ng-bind或者data-ng-model來綁定數據。但是在項目中很多數據都帶有各種各樣的html標簽，而angularjs綁定的數據都會默認以文本的形式輸出，並不會去識別html標簽，這樣做主要是為了防止html標簽中的注入攻擊，提高了安全性。那么如何顯示這些html標簽呢？
主要有兩種方法：
<body ng-app="myApp" ng-controller="myCtl">
<div ng-bind-html="htmlContent | to_trusted">
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtl',['$scope', function($scope){
$scope.htmlContent = '<h1 style="color: orange">wednesday</h1>';
}]);
app.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
</script>
2.$sce.trustAsHtml
<body ng-app="myApp" ng-controller="myCtl"> <div ng-bind-html="content"> </div> </body>
<script>
var app = angular.module('myApp', []);
$scope.content="My name is: <h1>John Doe</h1>";
app.controller('myCtl',['$scope','$sce', function($scope,$sce){
$scope.content = $sce.trustAsHtml( $scope.content );
}]);
</script>
這里主要有地方要注意：
1. ng-bind-html指令是通過一個安全的方式將內容綁定到HTML元素上，該屬性依賴於$sanitize，需要在項目中引入angular-sanitize.js文件，並在module定義時注入該服務ngSanitize。
2.通過ng-bind-html指令綁定html元素，為什么還需要$sce？
這是因為如果在angularjs中綁定的數據有html標簽時，如上面的<h1>,會被angularjs認為是不安全的而自動過濾掉，為了保留這些標簽就需要開啟非安全模式，這是非常危險的。$sce是angularJS自帶的安全處理模塊，因此需要$sce.trustAsHtml()方法將數據內容以html的形式解析並返回。
3.幾種綁定方式的對比
(1)ng-bind-html和內置的$sanitize服務
$sanitize會自動對html標簽進行凈化，並會把標簽的屬性以及綁定在元素上的事件都移除，僅保留了標簽和內容。
(2)ng-bind-html和$sce.trustAsHtml()
它不再經過sanitize服務的凈化，直接作為元素的.html()綁定給元素,保留所有的屬性和事件，這一行的內容不依賴於ngSanitize模塊,$sce服務是內置的。
(3)ng-bind
綁定的值就作為字符串填充到元素里。
使用ng-bind-html容易引起XSS(腳本注入攻擊)，這一點一定要注意。