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面试题 可以提前实现下
Jan 05 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
JS验证不重复验证码
Feb 10 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 Javascript
react项目实践之webpack-dev-serve
Sep 14 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
浅探express路由和中间件的实现
Sep 30 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
Mar 10 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更新mysql后获取改变行数的方法
2014/12/25 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
javascript 自动填写表单的实现方法
2010/04/09 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
Bootstrap 3 按钮标签实例代码
2017/02/21 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
Python中join和split用法实例
2015/04/14 Python
Python中用于返回绝对值的abs()方法
2015/05/14 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python中functools模块函数解析
2017/03/12 Python
Python编程实现蚁群算法详解
2017/11/13 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python判断无向图环是否存在的示例
2019/11/22 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python datetime处理时间小结
2020/04/16 Python
Python之字典添加元素的几种方法
2020/09/30 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
有机婴儿毛毯和衣服:Monica + Andy
2020/03/01 全球购物
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
公司出纳岗位职责
2013/12/07 职场文书
教师绩效考核方案
2014/01/21 职场文书
《翻越远方的大山》教学反思
2014/04/13 职场文书
小学运动会宣传稿
2015/07/23 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python3 如何开启自带http服务
2021/05/18 Python
MySQL导致索引失效的几种情况
2022/06/25 MySQL