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库 开发规则
Jan 31 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
怎么限制input的text里输入的值只能是数字(正则、js)
May 16 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
Mar 08 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
JS实现点星星消除小游戏
Mar 24 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
自制PHP框架之设计模式
2017/05/07 PHP
php设计模式之工厂模式用法经典实例分析
2019/09/20 PHP
checkbox 多选框 联动实现代码
2008/10/22 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
jQuery实现获取多选框的值示例
2020/02/07 jQuery
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[06:33]3.19 DOTA2发布会 海涛、冷冷、2009见证希望
2014/03/21 DOTA
[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Python3匿名函数lambda介绍与使用示例
2019/05/18 Python
用pandas划分数据集实现训练集和测试集
2020/07/20 Python
python openCV实现摄像头获取人脸图片
2020/08/20 Python
python进度条显示之tqmd模块
2020/08/22 Python
小结Python的反射机制
2020/09/28 Python
美国打印机墨水和碳粉购物网站:QuikShip Toner
2018/08/29 全球购物
运输服务质量承诺书
2014/03/27 职场文书
《画》教学反思
2014/04/14 职场文书
爱护环境卫生倡议书
2015/04/29 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
英语演讲开场白
2015/05/29 职场文书
清明扫墓感想
2015/08/11 职场文书
如何写好活动总结
2019/06/21 职场文书