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 学习笔记(三)
Dec 29 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
Aug 30 Javascript
JavaScript引用类型和基本类型详解
Jan 06 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 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
德生PL660的电路分析和打磨
2021/03/02 无线电
PHP新手上路(十二)
2006/10/09 PHP
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
js检测iframe是否加载完成的方法
2015/11/26 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
Django返回json数据用法示例
2016/09/18 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
Python对HTML转义字符进行反转义的实现方法
2019/04/28 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python连接PostgreSQL过程解析
2020/02/09 Python
Django之腾讯云短信的实现
2020/06/12 Python
杭州SQL浙江浙大网新恩普软件有限公司
2013/07/27 面试题
武汉高蓝德国际.net机试
2016/06/24 面试题
《火烧云》教学反思
2014/04/12 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2015年城市管理工作总结
2015/05/23 职场文书