ngBind {{}} ngBindTemplate
1.首先我们最常使用的一个绑定表达式的指令是ngBind，比如在一个div标签中我们可以这样使用：
<div ng-bind="vm.info"></div>
这样就把控制器中的vm.info的值绑定到这个div标签里面了，使用这个指令还有一个好处就是在页面还没有完全渲染好的情况下，是不会出现Angular的{{}}解析符号的，
它隐藏了Angular解析表达式的过程。如果你使用了下面的方法，
<div>{{vm.info}}</div>
在网速不是很好的情况下，就会出现{{}}解析符号，给用户带来不好的体验。
2.下一个绑定表达式的指令就是ngBindTemplate了，这个指令与上一个指令的最大不同之处是：ngBindTemplate可以绑定多个表达式，这样就有一个好处，在一些元素中，
比如title和option是不可以包含sapn元素的，这时候如果需要多个变量的话，ngBindTemplate就是很必须的。
<div ng-bind-template="{{vm.info}} {{vm.msg}}"></div>
还要注意一点就是，这个指令的用法，多个模型变量是用{{}}括起来的。
3.接下来的一些是关于模板的绑定，第一个比较常用的是ngBindHtml，从指令的名字就可以看出来，这个指令是绑定一段html的，那么这个指令该如何使用呢？我们来研究一下，首先，
我们需要在控制器定义一段html代码，如下所示：
vm.html = '<div class="container">\
<div class="title">{{vm.info}}</div>\
<div class="content">content</div>\
</div>';
然后我们就会很自然地想到按照下面的方法去使用这个指令：
<div ng-bind-html="vm.html"></div>
但是当你在浏览器上运行的时候，却发现浏览器给你报了一个错误，如下所示：
说你在一个安全的上下文中使用了不安全的值，怎么解决这个问题呢？我们可以手动的将我们定义的那段html代码，变成Angular信任的值，具体的方法是在控制器定义一个方法如下所示：
function trust_my_html(str){
return $sce.trustAsHtml(str);
}
然后在html中可以这样使用：
<div ng-bind-html="vm.trust_my_html(vm.html)"></div>
4.上面的方法在一定程度上解决了模板的绑定问题，但是，还有一个小问题，就是模板中的表达式并没有被解析，你可以看看我写的那个demo，所以要想解决这个问题，就是有两个办法，
首先就是你自己写一个指令，当绑定模板的时候，将模板中的表达式也给解析了，第二个办法就是使用别人的插件，我看到一个比较好的插件，名字叫做angular-bind-html-compile，
我们在我们的主模块中注入这个依赖就可以使用这个指令了，使用方法如下：
<div bind-html-compile="vm.html"></div>
这样一来，我们模块中的表达式也可以被解析了。还有需要注意，使用这个指令就不需要我们手动的将那段html片段变成Angular信任的值了。
5.当我们仔细看了看上面所说的那个指令，发现也不是那么的难，还不如我们自己写一个呢，不然还要引入他的文件，太费事了，具体的代码如下：
function compileBindHtml($compile){
var directive = {
restrict: 'AE',
link:linkFunc
};
return directive;
function linkFunc(scope, elements, attrs){
var func = function(){
return scope.$eval(attrs.compileBindHtml);
};
scope.$watch(func, function(newValue){
elements.html(newValue);
$compile(elements.contents())(scope);
})
}
}
我们来看看这个指令，在链接函数中，我们使用$watch监测func函数的返回值，func函数的返回值是一个被$eval的属性值，也就是我们的模板值，然后当检测到有变化的时候，
就将我们的模板值放置到含有这个指令的html标签中，然后在使用$compile服务将我们的模板给编译了。看看其实也不是那么难的。
6.最后一个可以用来绑定模板的指令是ngInclude，这个指令使用的频率相对来说比较高一点，那么这个指令怎么使用呢？我们一起来研究一下。
方法一，将模板写在html文件中，这个过程要通过使用script指令来实现，如下所示的一个例子：
<script type="text/ng-template" id="template-1">
<div class="container">
<div class="title">{{vm.info}}</div>
<div class="content">content</div>
</div>
</script>
这里来讲解一下怎么使用这个script指令，首先它的type属性值必须是ng-template，然后id值是它的一个标记或者索引，当你需要在html中使用它的时候就要使用这个id的值来引用这段模板。
方法二，将模板写在js文件中，通过使用$templateCache服务，来写我们的模板，具体的用法如下：
function configFuc($templateCache){
var template = '<div class="container">\
<div class="title">{{vm.info}}</div>\
<div class="content">content</div>\
</div>';
$templateCache.put('template-2', template);
}
我们的模板的索引是template-2，具体的内容就是template变量里面的内容。
在html里面使用的方法如下所示：
<div ng-include="'template-1'"></div>
<div ng-include="'template-2'"></div>
使用ngInclude的另一个好处就是模板里面的表达式是会被解析的。
完整的代码：
index.html
<body ng-controller="MyController as vm">
<script type="text/ng-template" id="template-1">
<div class="container">
<div class="title">{{vm.info}}</div>
<div class="content">content</div>
</div>
</script>
<h1 class="title">ngInclude <span>VS</span> ngBindHtml <span>VS</span> ngBind <span>VS</span> ngBindTemplate</h1>
<hr/>
<h3>ngBind</h3>
<div ng-bind="vm.info"></div>
<hr/>
<h3>ngBindTemplate</h3>
<div ng-bind-template="{{vm.info}} {{vm.msg}}"></div>
<hr/>
<h3>ngBindHtml</h3>
<!-- 这里需要加上这个trust函数 不然会被当做不安全的html 然后会报错-->
<div ng-bind-html="vm.trust_my_html(vm.html)"></div>
<!-- 下面的不需要在外层加上那个trust函数 ,不然会报错-->
<div compile-bind-html="vm.html"></div>
<!--可以使用别人写好的一个插件-->
<!--https://github.com/incuna/angular-bind-html-compile-->
<div bind-html-compile="vm.html"></div>
<hr/>
<h3>ngInclude</h3>
<!-- 加载的模板第一种方法是通过`$templateCache`服务 -->
<div ng-include="'template-1'"></div>
<!-- 加载模板的第二种方法是通过`script`指令 -->
<div ng-include="'template-2'"></div>
</body>
index.js
(function(){
angular.module('MyApp', ['angular-bind-html-compile'])
.run(configFuc)
.controller('MyController', MyController)
.directive('compileBindHtml', compileBindHtml);
configFuc.$inject = ['$templateCache'];
MyController.$inject = ['$sce'];
compileBindHtml.$inject = ['$compile'];
function configFuc($templateCache){
var template = '<div class="container">\
<div class="title">{{vm.info}}</div>\
<div class="content">content</div>\
</div>';
$templateCache.put('template-2', template);
}
function MyController($sce){
var vm = this;
vm.info = 'Hello,World';
vm.msg = 'Thank You!';
vm.html = '<div class="container">\
<div class="title">{{vm.info}}</div>\
<div class="content">content</div>\
</div>';
vm.trust_my_html = trust_my_html;
vm.get_trust_html = get_trust_html;
function trust_my_html(str){
return $sce.trustAsHtml(str);
}
function get_trust_html(str){
return $sce.getTrustedHtml(str);
}
}
function compileBindHtml($compile){
var directive = {
restrict: 'AE',
link:linkFunc
};
return directive;
function linkFunc(scope, elements, attrs){
var func = function(){
return scope.$eval(attrs.compileBindHtml);
};
scope.$watch(func, function(newValue){
elements.html(newValue);
$compile(elements.contents())(scope);
})
}
}
})();
style.css
h1.title{
text-align: center;
}
h1.title span{
color: #CCC;
}
.container{
width: 100%;
height: 60px;
}
.container .title{
height: 20px;
background-color: #b3d4fc;
font-size: 20px;
line-height: 20px;
text-align: center;
}
.container .content{
height: 40px;
background-color: #0000FF;
font-size: 15px;
line-height: 40px;
text-align: center;
}
h3{
text-align: center;
color: #FF0000;
}
div{
text-align: center;
}
参考的资料：How to make ng-bind-html compile angularjs code
ngBind {{}} ngBindTemplate的更多相关文章
- ngBind ngBindTemplate ngBindHtml
ng-bind: 只能绑定一个变量 在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{titleStr}}</p> 另一种是使用基于属 ...
- angularJS内置指令一览
基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hi ...
- 流行框架angular
---恢复内容开始--- 一.angular是什么 一款非常优秀的前端高级js框架,由谷歌团队负责开发 angular是通过新的属性和表达扩展了html angular可以构建一个单一页面应用程序(s ...
- angularJS之ng-bind与ng-bind-template的区别
ng-bind-template 指令用于告诉 AngularJS 将给定表达式的值替换 HTML 元素的内容. 当你想在 HTML 元素上绑定多个表达式时可以使用 ng-bind-template ...
- angular.js ngbind nghtml ngTemplate
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- ng-bind,ng-cloak优化数据显示
<div>{{text}}</div> 当我们使用angular在页面中有取值的时候,如果出现网络加载慢的问题,可能会在页面上出现{{text}}这种不好的体验,那么angul ...
- angularjs之ng-bind和ng-model
1.为什么其他标签可以用ng-bind ,而input标签要用ng-model 这就是所谓的数据双向绑定,input是用于用户输入的,数据要从View传输到Controller中,而{{}}和ng-b ...
- ng-bind 与ng-model区别
双向绑定,一般来说是这样 <input ng-model="object.xxx"> <span ng-bind="object.xxx"&g ...
- angularJS——ng-bind指令与插值的区别
在AngularJS中显示模型中的数据有两种方式: 一种是使用花括号插值的方式: <p>{{text}}</p> 另一种是使用基于属性的指令,叫做ng-bind: <p ...
随机推荐
- Linux 网络设备驱动开发（一） —— linux内核网络分层结构
Preface Linux内核对网络驱动程序使用统一的接口,并且对于网络设备采用面向对象的思想设计. Linux内核采用分层结构处理网络数据包.分层结构与网络协议的结构匹配,既能简化数据包处理流程,又 ...
- Java实现图片的裁剪
需求: 有一张位置大小的图片,现在需要根据这张原图得到指定尺寸的图片,且得到的图片要符合原先图片的比例,就是在原图的基础上等比例缩放得到图片后,在进行剪裁,这样保证得到的图片是原图的一部分,而不是将原 ...
- DG日志不应用，GAP,主备切换解决思路与办法
环境ORACLE 10G OS WINDOWS 对于DG故障解决思路,DG日志切换不进行应用,DG出现GAP解决方法,DG主备库切换, 当DG出现故障时,第一时间检测alert日志,服务器OS日志,网 ...
- Thinkphp学习笔记3-前置和后置操作
前置和后置操作指的是在执行某个操作方法之前和之后会自动调用的方法,不过仅对访问控制器有效. 其他的分层控制器层和内部调用控制器的情况下前置和后置操作是无效的. 系统会检测当前操作是否具有前置和后置操作 ...
- jQuery几个经典表单应用整理回想
1.文本框获得(失去)焦点 当文本框获得输入焦点时,将该文本框高亮显示,算不得一个应用.仅仅是一个小技巧,能够提高用户体验. [html] view plaincopy <span style= ...
- Vijos P1002 过河 （NOIP提高组2005）
链接:https://www.vijos.org/p/1002 解析: 若 p*x+(p+1)*y=Q(採用跳跃距离p和p+1时能够跳至不论什么位置Q),则在Q ≥ P*(P-1)时是一定有解的. 因 ...
- FileUpload类中FileUpload1.FileName和FileUpload1.PostedFile.FileName的区别
FileUpload1.FileName 用来获取客户端上使用 FileUpload 控件上载的文件的名称.此属性返回的文件名不包含此文件在客户端上的路径.FileUpload1.PostedFile ...
- TensorFlow编译androiddemo
首先是把tensorflow克隆到本地一份. git clone --recurse-submodules https://github.com/tensorflow/tensorflow.git 既 ...
- p2p网贷3种运营模式
迄今为止,接触了3套不同的P2P系统.当中一套是我參与开发的,另外两套是别的开发商提供的. P2P系统的核心实体:借款人.平台.理財人. 模式一: 借款人的线上账号由平台统一维护.借款人能够通 ...
- java反射-获取方法信息
例子代码如下: package com.reflect; import java.lang.reflect.Method; public class ClassUtill { /* * 打印类的信息, ...