<!DOCTYPE html>
<html><head>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta charset=utf-8 />
<title>插值字符串</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>
</div>
</body>
<script>
angular.module('myApp', [])
.controller('MyController',
function($scope, $interpolate) {
$scope.to = 'ari@fullstack.io对对对';
$scope.emailBody = 'Hello {{ to }},My name is Ari too!';
// Set up a watch
$scope.$watch('emailBody', function(q) {
//书中的参数名是body,传入带有插值的字符串 'Hello {{ to }},My name is Ari too!'
if (q) {var template = $interpolate(q);
$scope.previewText =
template({to: $scope.to}); //在此处说明插值的值,{{to}}为$scope.to
}
});
});
</script>
</html>
如果需要在文本中使用不同于{{}}的符号来表示表达式的开始和结束,可以在$interpolateProvider中陪住用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
- value(字符型) :开始符号的值。
用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。
- value(字符型) : 结束符号的值。
如果要修改这两个符号的设置,需要在创建新模块时将$interpolateProvider注入进去。下面我们来创建一个服务:
angular.module('emailParser',[])
.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol('__') ;
-
$interpolateProvider.endSymbol('__') ;
}])
.factory('EmailParser',['$interpolate',function($interpolate){
//处理解析的服务
return {
parse : function(text,context){
var template = $interpolate(text) ;
return template(context) ;
}
}
}]) ;
现在,我们已经创建了一个模块,可以将它注入到应用中,并在邮件正文的文本中运行这个邮件解析器:
- .controller('MyController', ['$scope', 'EmailParser',function($scope, EmailParser) {
- // 设置监听
- $scope.$watch('emailBody', function(body) {
- if (body) {
- $scope.previewText = EmailParser.parse(body, {
- to: $scope.to
- });
- }
- });
- }]);
由于我们将表达式开始和结束的符号都设置成了__,因此需要将HTML修改成用这个符号取代{{ }}的版本,- <div id="emailEditor">
- <input ng-model="to" type="email" placeholder="Recipient" />
- <textarea ng-model="emailBody"></textarea>
- </div>
- <div id="emailPreview">
- <pre>__ previewText __</pre>
- </div>