AngularJS ng-bind-html 指令詳解及實例代碼
AngularJS ng-bind-html 指令
AngularJS 實例
綁定 <p> 內(nèi)的 innerHTML 到變量 myText:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> <script src="http://apps.bdimg.com/libs/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="myCtrl"> <p ng-bind-html="myText"></p> </div> <script> var app = angular.module("myApp", ['ngSanitize']); app.controller("myCtrl", function($scope) { $scope.myText = "My name is: <h1>John Doe</h1>"; }); </script> <p><b>注意:</b> 該實例包含了 "angular-sanitize.js" 文件, 該文件移除 HTML 中的危險代碼。</p> </body> </html>
運行結(jié)果:
my name is:
John Doe
注意:該實例包含了 "angular-sanitize.js" 文件, 該文件移除 HTML 中的危險代碼。
定義和用法
ng-bind-html 指令是通一個安全的方式將內(nèi)容綁定到 HTML 元素上。
當你想讓 AngularJS 在你的應(yīng)用中寫入 HTML,你就需要去檢測一些危險代碼。通過在應(yīng)用中引入 "angular-santize.js" 模塊,使用 ngSanitize 函數(shù)來檢測代碼的安全性。 in your application you can do so by running the HTML code through the ngSanitize function.
語法
<element ng-bind-html="expression"></element>
所有的 HTML 元素都支持該指令。
參數(shù)值
值 | 描述 |
---|---|
expression | 指定要執(zhí)行的變量或表達式。 |
以上就是AngularJS ng-bind-html 指令實例的詳細介紹,有需要的朋友可以參考下。
相關(guān)文章
AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案
這篇文章主要介紹了AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案,需要的朋友可以參考下2015-02-02Angular.js中用ng-repeat-start實現(xiàn)自定義顯示
大家都知道Angular.js可以用ng-repeat來顯示列表數(shù)據(jù),可是如果想要自定義顯示數(shù)據(jù)列表的話ng-repeat就實現(xiàn)不了了,這個時候可以利用ng-repeat-start 和 ng-repeat-end來實現(xiàn),下面通過本文來詳細看看實現(xiàn)的方法吧。2016-10-10利用VS Code開發(fā)你的第一個AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開發(fā)你的第一個AngularJS 2應(yīng)用程序的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友下面來一起看看吧。2017-12-12