ng-bind-html是什麼？

是用來呈現html效果的指令。

本篇分享將會介紹ng-bind、ng-bind-html、ng-bind-html-unsafe的用法與結果差異。

Demo:

http://jsbin.com/oYAqeya/2
如果你想要將html的程式碼，在angular實現效果。

你可以使用ng-bind-html或ng-bind-html-unsafe這兩個指令。

不過使用前要注意專案中AngularJS的版本，

在AngularJS 1.2之後的版本，ng-bind-html已經取代ng-bind-html-unsafe。

而這兩者有何不同？

我們可以先來看看範例。

http://jsbin.com/oYAqeya/2/edit

ng-bind-html-unsafe怎麼用？

1. 建立一個$scope變數，裡面放html的程式碼
   範例中，建立一個名稱為someHtml的變數，裡面放一個圖片的img標籤

   $scope.someHtml = '<img src="http://angularjs.org/img/AngularJS-large.png" />';

2. 在標籤內，直接以ng-bind-html-unsafe來指定model名稱，
   使用ng-bind-html-unsafe需要注意，必須載入AngularJS 1.2以下的版本，否則會沒有效果。

   <div ng-bind-html-unsafe="someHtml"></div>

ng-bind-html怎麼用？

1. 使用ng-bind-html需要載入ngSanitize模組。

html-必須載入angular-sanitize.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular-sanitize.js"></script>

js-定義angularjs其他模組

var app = angular.module('app', ['ngSanitize']);

2. 和ng-bind-html-unsafe一樣，也是要建立$scope變數，裡面放html的程式碼
   範例中，建立一個名稱為someHtml的變數，裡面放一個圖片的img標籤

   $scope.someHtml = '<img src="http://angularjs.org/img/AngularJS-large.png" />';

3. 和ng-bind-html-unsafe一樣，在標籤內，直接使用ng-bind-html來指令model名稱。

   <div ng-bind-html="someHtml"></div>

另外，如果真的想要單純顯示html程式碼， 就可以使用ng-bind顯示內容。

參考資料：

Will保哥使用ng-bind-html的簡單範例

http://jsbin.com/angularjs-load-modules/1/edit

ng-bind-html與filter的進階用法-限制字元數量

http://jsbin.com/IriHUYU/1/edit

ngBindHtmlUnsafe的官方文件

http://code.angularjs.org/1.1.5/docs/api/ng.directive:ngBindHtmlUnsafe

ngBindHtml的官方文件

http://docs.angularjs.org/api/ng.directive:ngBindHtml

Insert HTML into view using AngularJS
http://stackoverflow.com/questions/9381926/insert-html-into-view-using-angularjs/10971756#10971756