angularjs中使用ng-bind-html和ng-include的實例
更新時間：2017年04月28日 09:59:55 投稿：jingxian
下面小編就為大家?guī)硪黄猘ngularjs中使用ng-bind-html和ng-include的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
下面這個例子，往div標(biāo)簽內(nèi)添加html內(nèi)容：
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<div ng-bind-html="myText"></div>
<script>
var app = angular.module('myApp',[]);
app.controller("ctrl",function($scope,$sce){
$scope.myText = $sce.trustAsHtml("<b>粗體內(nèi)容</b><br/><i>斜體內(nèi)容</i>");
});
</script>
</body>
</html>
注意在賦值時需要將html用$sce.trustAsHtml作一個處理，不然頁面會報錯，無法輸出內(nèi)容。
下面是ng-include的使用示例，跟上面的例子差不多，只是把要添加的html內(nèi)容放到一個文件中：
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript" src="lib/angularjs/angular.min.js" charset="utf-8"></script>
</head>
<body ng-controller="ctrl">
<div ng-include="'demo1_1.html'"></div>
<script>
var app = angular.module('myApp',[]);
app.controller("ctrl",function($scope){});
</script>
</body>
</html>
demo1_1.html
<b>粗體內(nèi)容222</b><br/><i>斜體內(nèi)容222</i>
以上這篇angularjs中使用ng-bind-html和ng-include的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03
angular2 ng2-file-upload上傳示例代碼
這篇文章主要介紹了angular2 ng2-file-upload上傳示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
本文主要介紹 AngularJS Service,這里整理了AngularJS Servic的詳細(xì)資料,并提供代碼實例,有需要的小伙伴可以參考下2016-07-07
Angular5中調(diào)用第三方j(luò)s插件的方法
下面小編就為大家分享一篇Angular5中調(diào)用第三方j(luò)s插件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Angularjs制作簡單的路由功能demo，剛剛開始學(xué)習(xí)Angularjs,做的不好，還請見諒。2015-04-04
本篇文章主要介紹了深入理解Angular中的依賴注入，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
本篇文章主要介紹了angularJS深拷貝，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
總結(jié)AngularJS開發(fā)者最常犯的十個錯誤
AngularJS是如今最受歡迎的JS框架之一，簡化開發(fā)過程是它的目標(biāo)之一，這使得它非常適合于元型較小的apps的開發(fā)，但也擴展到具有全部特征的客戶端應(yīng)用的開發(fā)。下面給大家總結(jié)了AngularJS開發(fā)者最常犯的十個錯誤，有需要的可以參考學(xué)習(xí)下。2016-08-08
今天小編就為大家分享一篇Angular服務(wù)Request異步請求的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了解析Angular 2+ 樣式綁定方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01