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,遇到的 ...
随机推荐
- tyvj Easy
Easy [描述 Description] 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则 有n次点击要做,成功了就是o,失败了就是x,分 ...
- BZOJ4552 HEOI2016排序
太棒了!思路很不错. 没想到HEOID1三道线段树. 这题我们可以二分答案,将小于他的在线段树中设成0,大于他的设成1然后模拟操作复杂度O(mlog^2n) By:大奕哥 #include<bi ...
- luoguP1354房间最短路问题
判断两点间连通性,建图跑floyed #include<bits/stdc++.h> using namespace std; ; struct node { ],x; }q[N];dou ...
- lucas定理 FOJ 2020 组合
Problem 2020 组合 Accept: 886 Submit: 2084Time Limit: 1000 mSec Memory Limit : 32768 KB Problem ...
- PHP -- 配置Apache遇到的问题
在本地电脑用XAMPP+php+mysql配置项目的时候,能够正常运行. 但是通过远程进入VPN配置的时候,配置方式一样,但是老是无法显示. 后来看了错误日志后,发现之前在没完全配置完的时候运行,生成 ...
- python开发_dbm_键值对存储_完整_博主推荐
''' 在python的应用程序中,不需要关系型数据库时,如MySQL 可以使用python提供的持久字典dbm来存储名称和值(键值对) 这个类似于java的中的java.util.Map对象. 区别 ...
- iOS开发之int,NSInteger,NSUInteger,NSNumber的使用
1.首先先了解下NSNumber类型: 苹果官方文档地址:https://developer.apple.com/library/ios/documentation/Cocoa/Reference/F ...
- source insight 设置自动缩进
转:http://biancheng.dnbcw.info/c/283027.html 使用source insight 的时候一直被一个问题困扰着:就是在 { 后如果敲下回车后,光标换行后,但没有 ...
- jdk8 流操作
二.流 2.1 流介绍 流是Java API的新成员,它允许你以声明性方式处理数据集合(通过查询语句来表达,而不是临时编写一个实现).就现在来说,你可以把它们看成遍历数据集的高级迭代器.此外,流还可以 ...
- ANDROID打包错误ERROR:EXECUTION FAILED FOR TASK ´:APP:LINTVITALRELEASE´.
来自:http://dditblog.com/itshare_657.html 今天修改之前的项目之后.准备打包的时候.一起打包不了.一直提示有问题.错误是一些什么Strings.xml里面的一些信息 ...