ngBind ngBindTemplate ngBindHtml
ng-bind: 只能绑定一个变量
在AngularJS中显示模型中的数据有两种方式:
一种是使用花括号插值的方式:
<p>{{titleStr}}</p>
另一种是使用基于属性的指令,叫做ng-bind:
<p><span ng-bind="titleStr"></span></p>
ng-bind-template: 可绑定多个变量
<p ng-bind-template="{{titleStr}}&&{{titleStr2}}"></p>
$scope.titleStr = "angularjs中的title";
$scope.titleStr2 = "title";
输出结果:
ngBindTemplate(ng-bind-template)与ngBind不同之处在于:ngBind只能单个绑定变量,且变量无需使用双括号“{{}}”,而ngBindTemplate则可以绑定一个模板,模板中可以包含多个AngularJS的表达式:“{{expression}}”。
ng-bind-html:
<p ng-bind-html="titleHtml"></p>
angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
$scope.titleHtml = "<h2>title</h2>";
}]);
上面这ng-bind-html写法不能将titleHtml显示出来,在控制台中会报如下错误:
https://docs.angularjs.org/error/$sce/unsafe 点开此链接,会给出错误的原因及解决方法;
ngBindHtml(ng-bind-html)可以将一个字符串以安全的方式插入到页面中并显示成Html。
ngBindHtml将强制使用angular-santitize服务进行安全检查,由于并非包含在AngualrJS核心库中,因此需要引入angular-santitize.js文件,并在定义ngModule时添加对于ngSantitize的依赖声明。
解决方法一:
1、引入angular-santitize.js文件
2、将ngSanitize注入到module中
代码如下:
<script src="../angular-sanitize.min.js"></script>
<script>
angular.module('myApp',['ngSanitize']) <!--将ngSanitize注入到module中-->
.controller('myCtrl',['$scope',function($scope){
$scope.titleHtml = "<h2>title</h2>";
}]);
</script>
参考:http://www.tuicool.com/articles/Q7VNJj
解决方法二:
使用$sce服务,将$sce服务注入到controller中,再使用$sce的trustAsHtml方法
不需要引入额外的js文件,只需要将$sce服务注入到controller即可:
angular.module('myApp',[])
.controller('myCtrl',['$scope','$sce',function($scope,$sce){
$scope.titleHtml = $sce.trustAsHtml("<h2>title</h2>");
}]);
ngBind ngBindTemplate ngBindHtml的更多相关文章
- ngBind {{}} ngBindTemplate
1.首先我们最常使用的一个绑定表达式的指令是ngBind,比如在一个div标签中我们可以这样使用: <div ng-bind="vm.info"></div> ...
- AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable
ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根节点如<body>或<html >标签的. 格 ...
- Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable
对于ng-系列的指令,每篇文章写2-5个吧,不然显得文章好短.... ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根 ...
- {{ }} 和ng-bind
花括号最后会转换成ng-bind,在一次加载数据的时候,显示花括号,所以使用ng-bind 或者ng-bind-html
- AngularJS 源码分析1
AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- Angular源代码学习笔记-原创
时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...
- AngularJS1.X学习笔记2-数据绑定
上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了 ...
- 流行框架angular
---恢复内容开始--- 一.angular是什么 一款非常优秀的前端高级js框架,由谷歌团队负责开发 angular是通过新的属性和表达扩展了html angular可以构建一个单一页面应用程序(s ...
随机推荐
- SQL Server Column Store Indeses
SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...
- springMVC基础controller类
此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:设置请求.响应对象:session.cookie操作:ajax访问返回json数据: 创建springMVC基础con ...
- Godaddy SSL 安装及Tomcat 7配置
基础环境:Centos 7.X 1. 安装tomcat 与java 环境: 2.使用jre 程序的keytool 生成密钥,java 我使用解压版本并运行目录在/usr/java, 生成tomcat. ...
- centos 6.x安装rvm 配置 Ruby开发环境
rvm是ruby的版本管理工具 还可对ruby进行 安装 卸载 等 1.安装 curl # sudo yum install curl # curl -L get.rvm.io | bash ...
- chm文件突然乱码了
今天打开一个chm文件的帮组文档时,文档时乱码,以前可不是的哦.不知道自己干什么操作了.上网找了下解决办法. 打开cmd 输入regedit 进入注册表:找到: HKEY_CURRENT_USER\S ...
- [原创]纯CSS3打造的3D翻页翻转特效
刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...
- [转]jquery遍历table的tr获取td的值
html代码: 1 <tbody id="history_income_list"> 2 <tr> 3 <td align="center& ...
- Fast RCNN 训练自己数据集 (2修改数据读取接口)
Fast RCNN训练自己的数据集 (2修改读写接口) 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ http ...
- 使用Ecplise git commit时出现"There are no stages files"
异常 解决方案 进入Window--Preferences--Team--Git--Committing,反选下图红圈部分: 保存后即可出线我们熟悉的提交代码界面啦:
- COGS247. 售票系统[线段树 RMQ]
247. 售票系统 ★★☆ 输入文件:railway.in 输出文件:railway.out 简单对比时间限制:1 s 内存限制:128 MB [问题描述] 某次列车途经C个城市,城市 ...