iT邦幫忙

DAY 21
3

入門AngularJS筆記與前端領域的學習筆記分享系列 第 21

Day21- 入門AngularJS筆記-AngularJS指令(18) ng-bind-html

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

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

js-定義angularjs其他模組

var app = angular.module('app', ['ngSanitize']);
  1. 和ng-bind-html-unsafe一樣,也是要建立$scope變數,裡面放html的程式碼
    範例中,建立一個名稱為someHtml的變數,裡面放一個圖片的img標籤

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

  2. 和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


上一篇
Day20- 入門AngularJS筆記-AngularJS指令(17) ng-bind-template
下一篇
Day22- 入門AngularJS筆記-AngularJS指令(19) ng-class
系列文
入門AngularJS筆記與前端領域的學習筆記分享30

1 則留言

0

我要留言

立即登入留言