angularjs中的interpolate

张小俊128 发布在AngulaJS实例2014年3月7日view：2197
在文章任何区域双击击即可给文章添加【评注】！浮到评注点上可以查看详情。
隐藏标注

在AngularJS中使用字符串模板

如果你曾经使用过Handlerbars等模板引擎，你一定会觉得在AngularJS中进行开发非常的爽。在AngularJS中，你可以直接将DOM当做模板来使用，比如下面的例子：

<div>My name is {{name}}</div> 
在AngularJS对页面施展魔法时，它会自动将{{name}}替换为当前作用域中的name属性值。这实在是太方便了，我们再也不需要在页面中加入<template>或者<script>来预定义我们的模板，并在需要使用时将它插入页面里面了。

但是，有时还是想要使用字符串模板，比如说要根据用户生成的具体数据来生成模板，而不是预先在DOM中定义的情况。在AngularJS中，这种情况也能轻松的得到解决，我们可以使用AngularJS内置的$interpolate service来达成我们的目标，具体代码如下：

angular.module('myapp',[])
             .controller('myctrl',function($scope,$interpolate){
                var tmp = $interpolate('Publish by {{name}} on {{date}}');
                var data1 = {name: 'Mike',date: '2014-1-1'};
                var data2 = {name: 'Karen',date: '2014-1-2'}; 

                var str1 = tmp(data1);
                var str2 = tmp(data2);
             });
上面的例子非常简单，如果你曾经使用过其他的模板引擎，你会发现$interpolate()就相当于Handlerbars里面的Handlebars.compile()函数，或者是underscore中的_.template函数()。它们都是接收一个包含插值占位符的字符串，然后返回一个函数，接着我们只需要将插值的对象传递给这个函数，就能得到一个经过插值之后的字符串。

另外，在$interpolate中，我们也同样能够使用过滤器，比如下面的例子：

var template = $interpolate( 'Published by {{name|uppercase}} on {{date}}' );
var str = template( { name: 'Mike', date: '2013-11-25' } );
// str == "Published by MIKE on 2013-11-25"