angularjs中使用ng-bind-html和ng-include
下面这个例子，往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的更多相关文章
- AngularJS中angular.min.js:80 Error: [ng:areq] http://errors.angularjs.org/1.2.9/ng/areq
报出来的时候,出现这种错误,是因为在引入控制器的时候没有引入成功,我遇到这个错误是在因为没有将父控制器引入到子控制器中.
- 深入学习AngularJS中数据的双向绑定机制
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- (九)通过几段代码，理清angularJS中的$injector、$rootScope和$scope的概念和关联关系
$injector.$rootScope和$scope是angularJS框架中比較重要的东西,理清它们之间的关系,对我们兴许学习和理解angularJS框架都很实用. 1.$injector事实上是 ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
- 理解AngularJS中的依赖注入
点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...
- angularjs 中通过 $location 进行路由跳转传参
$location.path('/page1').search({id: $scope.id,name:$scope.name}); 带参数跳转页面,在新的页面通过$routeParams接收参数 $ ...
- angularJS中$apply()方法详解
这篇文章主要介绍了angularJS中$apply()方法详解,需要的朋友可以参考下 对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的 ...
随机推荐
- 抓包分析LVS-NAT中出现的SYN_RECV
CIP:192.168.10.193 VIP:192.168.10.152:8000 DIP:100.10.8.152:8000 RIP:100.10.8.101:8000 和 100.10.8.10 ...
- Proud Merchants HDU - 3466 (思路题--有排序的01背包)
Recently, iSea went to an ancient country. For such a long time, it was the most wealthy and powerfu ...
- Hibernate.cfg.xml详解
在搭建Hibernate环境时需要配置Hibernate.cfg.xml配置文件,本文将想详细讲解配置文件的内容. 1.数据库连接信息 配置数据库驱动.(其中name为连接方式,我在这写jdbc的连接 ...
- 【BZOJ 3218】 3218: a + b Problem（最小割+可持久化线段树）
3218: a + b Problem Time Limit: 20 Sec Memory Limit: 40 MBSubmit: 1440 Solved: 545 Description Inp ...
- UVA11107 Life Forms --- 后缀数组
UVA11107 Life Forms 题目描述: 求出出现在一半以上的字符串内的最长字符串. 数据范围: \(\sum len(string) <= 10^{5}\) 非常坑的题目. 思路非常 ...
- JZYZOJ1622 [usaco2009]工作安排 贪心
和p1123智力大冲浪一样,可以用优先队列写... 每一秒可以做一个工作....因为n个任务只要在限制之前完成就行,所以时间不冲突的话肯定越早做完越好..所以最多的时间是n,当然限定的完成时间中最 ...
- MongoDB,pymongo
MongoDB: 数据库,nosql [{ id:1 name:"蔡文姬" age: 16 gender:"女" }, { id:1 name:"蔡文 ...
- bzoj 2056: gift? 高精度？
2056: gift? 高精度? Time Limit: 10 Sec Memory Limit: 1 MB Description Input 输入的第一行为一个整数t. 接下来t行,每行包含 ...
- md5加密，md5加盐加密和解密
package com.java.test; import java.security.MessageDigest; import java.security.SecureRandom; import ...
- 如何在Ubuntu中用firefox浏览器查看chm文档？
首先下载这插 件:在firefox中点击“工具”->“附加软件”->“扩展”,在firefix扩展网页下搜索“"chmfox" 然后安装,重启后就可以了.