angularjs中使用ng-bind-html和ng-include的实例


Posted in Javascript onApril 28, 2017

下面这个例子,往div标签内添加html内容:

<!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>粗体内容</b><br/><i>斜体内容</i>");
});
</script>
</body>
</html>

注意在赋值时需要将html用$sce.trustAsHtml作一个处理,不然页面会报错,无法输出内容。

下面是ng-include的使用示例,跟上面的例子差不多,只是把要添加的html内容放到一个文件中:

<!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>粗体内容222</b><br/><i>斜体内容222</i>

以上这篇angularjs中使用ng-bind-html和ng-include的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery中实现标签切换效果的代码
Mar 01 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
Bootstrap CSS布局之代码
Dec 17 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
d3.js入门教程之数据绑定详解
Apr 28 #Javascript
jQuery tip提示插件(实例分享)
Apr 28 #jQuery
JS实现动态添加DOM节点和事件的方法示例
Apr 28 #Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 #jQuery
详解angularJs模块ui-router之状态嵌套和视图嵌套
Apr 28 #Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 #Javascript
d3.js实现立体柱图的方法详解
Apr 28 #Javascript
You might like
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
htm调用JS代码
2007/03/15 Javascript
自己的js工具_Form 封装
2009/08/21 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
在vs2010中调试javascript代码方法
2011/02/11 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
Vue 中mixin 的用法详解
2018/04/23 Javascript
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
详细教你微信公众号正文页SVG交互开发技巧
2019/07/25 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
python列表list保留顺序去重的实例
2018/12/14 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python3实现点餐系统
2019/01/24 Python
值得收藏的10道python 面试题
2019/04/15 Python
Python timeit模块的使用实践
2020/01/13 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
英文简历自荐信范文
2013/12/11 职场文书
开办化妆品公司创业计划书
2013/12/26 职场文书
临床护士自荐信
2014/01/31 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
2014年纪委工作总结
2014/12/05 职场文书
老龙头导游词
2015/02/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
七年级数学教学反思
2016/02/17 职场文书