有时候我们需要在angular表达式中写入html结构并被浏览器解析，而不是当作字符串来处理，如下所示：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>angular</title>
<meta charset="utf-8">
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="test">
<p>{{data}}</p>
</div>
<script>
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.data = "<strong>angular</strong>表达式";
});
</script>
</body>
</html>但结果却输出：
<strong>angular</strong>表达式
此时我们可以定义一个html过滤器来达到预期的效果：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>angular</title>
<meta charset="utf-8">
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="test">
<p ng-bind-html="data | html"></p>
</div>
<script>
var app = angular.module('app', []);
app.controller('test', function($scope) {
$scope.data = "<strong>angular</strong>表达式";
});
app.filter('html', ['$sce', function ($sce) {
return function (text) {
return $sce.trustAsHtml(text);
};
}]);
</script>
</body>
</html>