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 相关文章推荐
javascript 基础篇4 window对象,DOM
Mar 14 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
通过JS来判断页面控件是否获取焦点
Jan 03 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
js分页工具实例
Jan 28 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
design vue 表格开启列排序的操作
Oct 28 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
JavaScript浏览器选项卡效果
2010/08/25 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
Angular2使用jQuery的方法教程
2017/05/28 jQuery
vue的传参方式汇总和router使用技巧
2018/05/22 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
2018/08/28 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
写了个监控nginx进程的Python脚本
2012/05/10 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
Pandas分组与排序的实现
2019/07/23 Python
python中几种自动微分库解析
2019/08/29 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
CSS3中的注音对齐属性ruby-align用法指南
2016/07/01 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
西班牙灯具网上商店:Lampara.es
2018/06/05 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
俄罗斯三星品牌商店:Samsungstore
2020/04/05 全球购物
Weblogc domain问题
2014/01/27 面试题
群众路线教育实践活动整改落实情况汇报
2014/10/28 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
优秀团支部申报材料
2014/12/26 职场文书
大学副班长竞选稿
2015/11/21 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android