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. Android上传文件至服务器(上)

    每一次都不能上首页,真悲催..管理员让我上一次首页? 很多时候我更愿意一个人写代码,与其在垃圾代码上改改改,我更愿意直接重构. 整洁的代码简单直接.整洁的代码如同优美的散文.整洁的代码从不隐藏设计者的 ...

  2. win10磁盘100%解决办法

    控制面板-管理工具-服务 找到“HomeGroupListener”服务,双击打开或右键单击“属性”命令. 在弹出属性界面窗口,在常规选项卡单击启动类型的下拉框,出来的列表选择“禁用”.然后在服务状态 ...

  3. [经验]Textbox 做日志记录,

    private void Log(string msg) { txtLog.MaxLength = ; txtLog.AppendText(msg); } 起因:在Winform中用Textbox显示 ...

  4. ElasticSearch集群设置

    多台机器 \config\elasticsearch.yml 文件修改 cluster.name设置统一的集群名如 cluster.name: win-es-001 node.name 设置当前Nod ...

  5. 基本shell编程【2】-服务端发布脚本

    set -x deployBase="/var/lib/tomcat7/webapps" bakBase="/root/bak" echo "auto ...

  6. JavaScript函数的概念

    函数是这样的一段代码,它只定义一次,但可能被执行或调用任意多次. JavaScript函数是参数化的:函数的定义会包含形参,这些参数在函数的整体中像局部变量一样工作.函数调用时会为形参提供实参的值.除 ...

  7. pacemaker+corosync/heartbeat对比及资源代理RA脚本

    一.Pacemaker概念 (1)Pacemaker(心脏起搏器),是一个高可用的群集资源管理器.它实现最大可用性资源管理的节点和资源级故障检测和恢复,通过使用首选集群基础设施(Corosync或He ...

  8. ArrayList,Vector,LinkedList

    在java.util包中定义的类集框架其核心的组成接口有如下:·Collection接口:负责保存单值的最大父接口 |-List子接口:允许保存重复元素,数据的保存顺序就是数据的增加顺序: |-Set ...

  9. 细说 C# 中的 IEnumerable和IEnumerator接口

    我们先思考几个问题: 为什么在foreach中不能修改item的值? 要实现foreach需要满足什么条件? 为什么Linq to Object中要返回IEnumerable? 接下来,先开始我们的正 ...

  10. SortedMap接口:进行排序操作。

    回顾:SortedSet是TreeSet的实现接口,此接口可以排序. SortedMap接口同样可以排序,是TreeMap的实现接口,父类. 定义如下: public class TreeMap< ...