angularjs——插值字符串
一、何为插值字符串？
其实插值字符串的意思就是：拥有字符插值标记的字符串。
如： hello,{{ to }}....
字符插值标记：相当于我们平时在字符串替换中使用到的占位符。
上面的例子中的{{to}}其实就是类似于一个占位符，我们可以通过$interpolate服务将上面的例子中的字符串进行处理，返回一个模板对象，由于$interpolate服务默认是将{{、}}分别当做是占位符的前缀和后缀，所以，上面的例子中的{{to}}将会被当做一个占位符，并且把to当做该占位符的命名，可以给模板对象传入一个对象如：{to:'xxxx'}，直接替换掉{{to}}占位符。
二、来个栗子！
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-app="myApp"> <div ng-controller="MyController"> <input ng-model="to" type="email" placeholder="Recipient" /> <textarea ng-model="emailBody"></textarea> <pre>{{ previewText }}</pre> <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script> </div> </body> </html>
angular.module('myApp',[])
.controller('MyController',function($scope,$interpolate){
$scope.emailBody = "hello,{{to}}";
$scope.to = 'ari@fullstack.io';
var template = $interpolate($scope.emailBody);
$scope.$watch('to',function(to){
console.log(to);
$scope.previewText = template({'to':$scope.to});
});
});
代码片段：JS Bin on jsbin.com
三、$interpolate服务
$interpolate服务是一个可以接受三个参数的函数，其中第一个参数是必需的。
- text（字符串）：一个包含字符插值标记的字符串。
- mustHaveExpression（布尔型）：如果将这个参数设为true，当传入的字符串中不含有表
达式时会返回null。 - trustedContext（字符串）： AngularJS会对已经进行过字符插值操作的字符串通过
$sec.getTrusted()方法进行严格的上下文转义。
$interpolate服务返回一个函数，用来在特定的上下文中运算表达式。
四、如何改变占位符的前、后缀？
上面的第一点就讲到了$interpolate默认的占位符是以{{、}}为前后缀的。
那这个占位符的前后缀能否改成我们自己想要的样子呢？
答案是肯定的，当然可以改~~
我们只需要在$interpolateProvider服务进行配置。
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
注意：使用$interpolateProvider进行设置这个占位符的前后缀的时候，需要注意你的上下文，如果你是直接在某个模块下进行配置，那么该模块的angularjs数据绑定对象的{{xxx}}格式也会被影响。
如：
angular.module('myApp',[])
.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}])
.controller('MyController',function($scope,$interpolate){
$scope.emailBody = "hello,__to__";
$scope.to = 'ari@fullstack.io';
$scope.previewText ="";
var template = $interpolate($scope.emailBody);
$scope.$watch('to',function(to){
console.log(to);
$scope.previewText = template({'to':$scope.to});
console.log($scope.previewText);
});
});
那么html页面中{{previewText}}就也要改成__previewText__的格式.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body ng-app="myApp"> <div ng-controller="MyController"> <input ng-model="to" type="email" placeholder="Recipient" /> <br/> <textarea ng-model="emailBody"></textarea> <br/> <pre>__previewText__</pre> <script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script> </div> </body> </html>
所以，一般情况下$interpolateProvide用在自己创建的服务上面，这样就可以把上下文环境进行隔离。
代码片段：JS Bin on jsbin.com
