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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
Aug 01 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
JavaScript接口的实现三种方式(推荐)
Jun 14 Javascript
微信开发 使用picker封装省市区三级联动模板
Oct 28 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
详解angularJs中关于ng-class的三种使用方式说明
Jun 02 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP的fsockopen、pfsockopen函数被主机商禁用的解决办法
2014/07/08 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
JS通过ajax动态读取xml文件内容的方法
2015/03/24 Javascript
全面解析bootstrap格子布局
2016/05/22 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
element-ui 限制日期选择的方法(datepicker)
2018/05/16 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
jQuery实现评论模块
2020/08/19 jQuery
[03:46]DOTA2英雄基础教程 维萨吉
2013/12/11 DOTA
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
python实现在遍历列表时,直接对dict元素增加字段的方法
2019/01/15 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
四好少年事迹材料
2014/01/12 职场文书
校园公益广告语
2014/03/13 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
施工安全标语
2014/06/07 职场文书
消防宣传口号
2014/06/16 职场文书
商场周年庆活动方案
2014/08/19 职场文书
庆祝国庆节标语
2014/10/09 职场文书
公安机关正风肃纪剖析材料
2014/10/10 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
Python学习之异常中的finally使用详解
2022/03/16 Python