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 元素上。
當(dāng)你想讓 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í)行的變量或表達(dá)式。 |
以上就是AngularJS ng-bind-html 指令實例的詳細(xì)介紹,有需要的朋友可以參考下。
相關(guān)文章
AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案
這篇文章主要介紹了AngularJs根據(jù)訪問的頁面動態(tài)加載Controller的解決方案,需要的朋友可以參考下2015-02-02
Angular.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),下面通過本文來詳細(xì)看看實現(xiàn)的方法吧。2016-10-10
利用VS Code開發(fā)你的第一個AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開發(fā)你的第一個AngularJS 2應(yīng)用程序的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友下面來一起看看吧。2017-12-12

