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.js實現(xiàn)列表orderby排序的方法
今天小編就為大家分享一篇angular.js實現(xiàn)列表orderby排序的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
深入解析AngularJS框架中$scope的作用與生命周期
這篇文章主要介紹了AngularJS中$scope的作用與生命周期,包括在DOM中添加controller對象的相關(guān)用法,需要的朋友可以參考下2016-03-03
這篇文章主要介紹了在angular 6中使用 less 的實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
使用AngularJS來實現(xiàn)HTML頁面嵌套的方法
這篇文章主要介紹了使用AngularJS來實現(xiàn)HTML頁面嵌套的方法,主要用到了AngularJS中的ng-include指令,需要的朋友可以參考下2015-06-06
angularjs指令中的compile與link函數(shù)詳解
這篇文章主要介紹了angularjs指令中的compile與link函數(shù)詳解,本文同時訴大家complie,pre-link,post-link的用法與區(qū)別等內(nèi)容,需要的朋友可以參考下2014-12-12
今天小編就為大家分享一篇Angular4 Select選擇改變事件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
angularjs的單選框+ng-repeat的實現(xiàn)方法
今天小編就為大家分享一篇angularjs的單選框+ng-repeat的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了angular實現(xiàn)IM聊天圖片發(fā)送實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本篇文章主要介紹了angularjs封裝$http為factory的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要介紹了AngularJS實現(xiàn)全選反選功能，這里用到AngularJS四大特性之二----雙向數(shù)據(jù)綁定，對angularjs實現(xiàn)全選反選相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2015-12-12