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的更多相关文章

  1. ngBind {{}} ngBindTemplate

    1.首先我们最常使用的一个绑定表达式的指令是ngBind,比如在一个div标签中我们可以这样使用: <div ng-bind="vm.info"></div> ...

  2. AngularJs ngApp、ngBind、ngBindHtml、ngNonBindable

    ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根节点如<body>或<html >标签的. 格 ...

  3. Angular - - ngApp、ngBind、ngBindHtml、ngNonBindable

    对于ng-系列的指令,每篇文章写2-5个吧,不然显得文章好短.... ngApp 使用这个指令自动启动一个AngularJS应用.ngApp指令指定了应用程序的根节点,通常会将ngApp放置在网页的根 ...

  4. {{ }} 和ng-bind

    花括号最后会转换成ng-bind,在一次加载数据的时候,显示花括号,所以使用ng-bind 或者ng-bind-html

  5. AngularJS 源码分析1

    AngularJS简介 angularjs 是google出品的一款MVVM前端框架,包含一个精简的类jquery库,创新的开发了以指令的方式来组件化前端开发,可以去它的官网看看,请戳这里 再贴上一个 ...

  6. angular源码分析:angular的整个加载流程

    在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...

  7. Angular源代码学习笔记-原创

    时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http:// ...

  8. AngularJS1.X学习笔记2-数据绑定

    上一篇从整体上认识了Angular,从现在开始更加深入的学习Angular的特性.本次学习的是数据绑定.应该所有的MVC框架都会用到数据绑定,比如我所知道的ThinkPHP.struts等,只有实现了 ...

  9. 流行框架angular

    ---恢复内容开始--- 一.angular是什么 一款非常优秀的前端高级js框架,由谷歌团队负责开发 angular是通过新的属性和表达扩展了html angular可以构建一个单一页面应用程序(s ...

随机推荐

  1. SQL Server Column Store Indeses

    SQL Server Column Store Indeses SQL Server Column Store Indeses 1. 概述 2. 索引存储 2.1 列式索引存储 2.2 数据编码和压缩 ...

  2. springMVC基础controller类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:设置请求.响应对象:session.cookie操作:ajax访问返回json数据: 创建springMVC基础con ...

  3. Godaddy SSL 安装及Tomcat 7配置

    基础环境:Centos 7.X 1. 安装tomcat 与java 环境: 2.使用jre 程序的keytool 生成密钥,java 我使用解压版本并运行目录在/usr/java, 生成tomcat. ...

  4. centos 6.x安装rvm 配置 Ruby开发环境

    rvm是ruby的版本管理工具  还可对ruby进行 安装 卸载 等 1.安装 curl #  sudo yum install  curl #  curl -L  get.rvm.io | bash ...

  5. chm文件突然乱码了

    今天打开一个chm文件的帮组文档时,文档时乱码,以前可不是的哦.不知道自己干什么操作了.上网找了下解决办法. 打开cmd 输入regedit 进入注册表:找到: HKEY_CURRENT_USER\S ...

  6. [原创]纯CSS3打造的3D翻页翻转特效

    刚接触CSS3动画,心血来潮实现了一个心目中自己设计的翻页效果的3D动画,页面纯CSS3,目前只能在Chrome中玩,理论上可以支持Safari. 1. 新建HTML,代码如下(数据和翻页后的数据都是 ...

  7. [转]jquery遍历table的tr获取td的值

    html代码: 1 <tbody id="history_income_list"> 2 <tr> 3 <td align="center& ...

  8. Fast RCNN 训练自己数据集 (2修改数据读取接口)

    Fast RCNN训练自己的数据集 (2修改读写接口) 转载请注明出处,楼燚(yì)航的blog,http://www.cnblogs.com/louyihang-loves-baiyan/ http ...

  9. 使用Ecplise git commit时出现"There are no stages files"

    异常   解决方案 进入Window--Preferences--Team--Git--Committing,反选下图红圈部分:   保存后即可出线我们熟悉的提交代码界面啦:

  10. COGS247. 售票系统[线段树 RMQ]

    247. 售票系统 ★★☆   输入文件:railway.in   输出文件:railway.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述] 某次列车途经C个城市,城市 ...