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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
Mar 02 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
Node.js Buffer用法解读
May 18 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
Apr 09 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
vue实现登录拦截
Jun 29 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反弹shell实现代码
2009/04/22 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
PHP应用JSON技巧讲解
2013/02/03 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP学习记录之数组函数
2018/06/01 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
jquery如何扑捉回车键触发的事件
2014/04/24 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JS获取IMG图片高宽的简单实例
2016/05/17 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
实现两个文本框同时输入的实例
2017/09/25 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
Vue 中使用富文本编译器wangEditor3的方法
2019/09/26 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
python输出当前目录下index.html文件路径的方法
2015/04/28 Python
使用python实现接口的方法
2017/07/07 Python
python之生产者消费者模型实现详解
2019/07/27 Python
详解python中的生成器、迭代器、闭包、装饰器
2019/08/22 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python 批量将中文名转换为拼音
2021/02/07 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
一些Unix笔试题和面试题
2013/01/22 面试题
十佳大学生村官事迹
2014/01/09 职场文书
手机促销活动方案
2014/02/05 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
世界遗产导游词
2015/02/13 职场文书