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之原型和继承
Jul 06 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
js实现五星评价功能
Mar 08 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
vue.js实现简单的计算器功能
Feb 22 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
IIS安装Apache伪静态插件的具体操作图文
2013/07/01 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
原生JS和jQuery版实现文件上传功能
2016/04/18 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
win7安装python生成随机数代码分享
2013/12/27 Python
使用python装饰器验证配置文件示例
2014/02/24 Python
python3简单实现微信爬虫
2015/04/09 Python
python从入门到精通(DAY 1)
2015/12/20 Python
Python实现针对含中文字符串的截取功能示例
2017/09/22 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
Python分类测试代码实例汇总
2020/07/23 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
外贸采购员岗位职责
2014/03/08 职场文书
超市活动计划书
2014/04/24 职场文书
临床护理求职信
2014/04/26 职场文书
学校四群教育实施方案
2014/06/12 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
2014年调度员工作总结
2014/11/19 职场文书
投诉书格式范本
2015/07/02 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
Python+Pillow+Pytesseract实现验证码识别
2022/05/11 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android