Page 42 - AngularJS权威教程
P. 42
22 第 6 章 表达式
由于控制器内部设置了一个需要每次变化都重新进行字符插值的自定义输入字段,因此需要
设置一个$watch来监听数据的变化。第23章将深入讨论$watch。为了保证示例的完整性,在这
里我们为$watch引入完整的代码。
简而言之,$watch函数会监视$scope上的某个属性。只要属性发生变化就会调用
对应的函数。可以使用$watch函数在$scope上某个属性发生变化时直接运行一个自定
义函数。
在控制器中,我们设置了$watch来监视邮件正文的变化,并将emailBody属性的值进行字符
插值后的结果赋值给previewText属性。
angular.module('myApp', [])
.controller('MyController', function($scope, $interpolate) {
// 设置监听
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText =
template({to: $scope.to});
}
};
});
在线实例:http://jsbin.com/oDeFuCAW/1/edit?html,js,output。
现在,在{{ previewText }}内部的文本中可以将{{ to }}当做一个变量来使用,并对文本
的变化进行实时更新。
如果需要在文本中使用不同于{{ }}的符号来标识表达式的开始和结束,可以在
$inter polateProvider中配置。
用startSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
value(字符型):开始符号的值。
用endSymbol()方法可以修改标识结束的符号。这个方法也接受一个参数。
value(字符型): 结束符号的值。
如果要修改这两个符号的设置,需要在创建新模块时将$interpolateProvider注入进去。
下面我们来创建一个服务,第14章会对服务进行深入讨论。
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);