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 相关文章推荐
Valerio 发布了 Mootools
Sep 23 Javascript
javascript RadioButtonList获取选中值
Apr 09 Javascript
JavaScript Object的extend是一个常用的功能
Dec 02 Javascript
如何动态的导入js文件具体该怎么实现
Jan 14 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
JavaScript中的call和apply的用途以及区别
Jan 11 Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue中使用protobuf的过程记录
Oct 26 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编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
php中防止SQL注入的最佳解决方法
2013/04/25 PHP
laravel安装和配置教程
2014/10/29 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
javascript 动态加载 css 方法总结
2009/07/11 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
html的DOM中document对象forms集合用法实例
2015/01/21 Javascript
javascript中call apply 的应用场景
2015/04/16 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
解决vue-cli webpack打包后加载资源的路径问题
2018/09/25 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
详解Webpack抽离第三方类库以及common解决方案
2020/03/30 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python基本语法练习实例
2017/09/19 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
商务英语毕业生自荐信范文
2013/11/08 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
节能减排倡议书
2014/04/15 职场文书
2014年社会实践活动总结范文
2014/04/29 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Promise面试题详解之控制并发
2021/05/14 面试题
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript