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面向对象编程
Mar 02 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
解析Node.js基于模块和包的代码部署方式
Feb 16 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
js检查是否关闭浏览器的方法
Aug 02 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
浅谈JavaScript 代码整洁之道
Oct 23 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/06/10 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
IE浏览器不支持getElementsByClassName的解决方法
2014/08/27 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
nodejs使用redis作为缓存介质实现的封装缓存类示例
2018/02/07 NodeJs
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
python定时器使用示例分享
2014/02/16 Python
Python中的推导式使用详解
2015/06/03 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
python程序需要编译吗
2020/06/19 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
小学生演讲稿
2014/01/12 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
先进集体申报材料
2014/12/25 职场文书
合理化建议书
2015/02/04 职场文书
2015年电信员工工作总结
2015/05/26 职场文书
舞出我人生观后感
2015/06/16 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技