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加jquery简单实现标签元素的显示或隐藏
Sep 23 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
node.js中的querystring.escape方法使用说明
Dec 10 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
在vue中created、mounted等方法使用小结
Jul 21 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 用数组降低程序的时间复杂度
2009/12/04 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
php实现网站留言板功能
2015/11/04 PHP
Stop SQL Server
2007/06/21 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
KnockoutJS 3.X API 第四章之数据控制流with绑定
2016/10/10 Javascript
js初始化验证实例详解
2016/11/26 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
JS抛物线动画实例制作
2018/02/24 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
webpack配置proxyTable时pathRewrite无效的解决方法
2018/12/13 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
微信小程序语音同步智能识别的实现案例代码解析
2020/05/29 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
apache部署python程序出现503错误的解决方法
2017/07/24 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
Python实现打包成库供别的模块调用
2020/07/13 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
python爬取音频下载的示例代码
2020/10/19 Python
python绘图模块之利用turtle画图
2021/02/12 Python
CSS3之2D与3D变换的实现方法
2019/01/28 HTML / CSS
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
公司行政经理岗位职责
2013/12/24 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
公务员年度考核评语
2014/12/31 职场文书