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 相关文章推荐
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
Aug 06 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
关于引入vue.js 文件的知识点总结
Jan 28 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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 CURL获取返回值的方法
2014/05/04 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JavaScript获取页面中表单(form)数量的方法
2015/04/03 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Vue 2.0的数据依赖实现原理代码简析
2017/07/10 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
JS实现网页时钟特效
2020/03/25 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
详解使用Python处理文件目录的相关方法
2015/10/16 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
浅析Python requests 模块
2020/10/09 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
关于赌博的检讨书
2014/01/24 职场文书
《假如》教学反思
2014/04/17 职场文书
应届生求职信范文
2014/05/26 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
个人职业及收入证明
2014/10/13 职场文书
介绍信格式
2015/01/30 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
Django Paginator分页器的使用示例
2021/06/23 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
Mysql调整优化之四种分区方式以及组合分区
2022/04/13 MySQL