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 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
Node.js的Web模板引擎ejs的入门使用教程
Jun 06 Javascript
微信小程序 页面跳转传值实现代码
Jul 27 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
vue webpack打包优化操作技巧
Feb 22 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
javascript实现简单留言板案例
Feb 09 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 header函数使用教程
2013/09/05 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
PHP生成随机数的方法实例分析
2015/01/22 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
php格式化时间戳
2016/12/17 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
PHP中overload与override的区别
2017/02/13 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
JS实现网页表格自动变大缩小的方法
2015/03/09 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
在Vue methods中调用filters里的过滤器实例
2018/08/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
微信小程序下拉加载和上拉刷新两种实现方法详解
2019/09/05 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python 创建一维的0向量实例
2019/12/02 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
如何清空Session
2015/02/23 面试题
银行培训心得体会范文
2016/01/09 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers