表达式在AngularJS应用中被广泛使用,因此深入理解AngularJS如何使用并运算表达式是非常重要的。
前面已经见过使用表达式的示例。用{{ }}符号将一个变量绑定到$scope上的写法本质上就是一个表达式:
{{ expression }}。当用$watch进行监听时,AngularJS会对表达式或函数进行运算。
表达式和eval(javascript)非常相似,但是由于表达式由AngularJS来处理,它们有以下显著不同的特性:
-
所有的表达式都在其所属的作用域内部执行,并有访问本地$scope的权限;
-
如果表达式发生了TypeError和ReferecneError并不会抛出异常;(类型错误,引用错误);
-
不允许使用任何流程控制功能(条件控制,例如if/else);
-
可以接受过滤器和过滤链接;
对表达式进行的任何操作,都会在其所属的作用域内部执行,因此可以在表达式内部调用那
些限制在此作用域内的变量,并可以对他们进行循环、函数调用、将变量应用到数学表达式中等操作。
解析AngularJS表达式
尽管AngularJS会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是非常有用的。
http://blog.csdn.net/dm_vincent/article/details/38705099
插值字符串
在AngularJS中,我们有手动运行模板编译的能力。例如:
插值允许基于作用域上的某个条件实时更新文本字符串。
如果需要在文本中使用不同于{{ }}的符号来标识表达式的开始和结束,
可以$inter polateProvider中配置。
用startSymbol()【符号】方法可以修改标识开始的符号。这个方法接受一个参数。
- value(字符型):开始符号的值。
用endSymbol()方法可以修改标识开始的符号。这个方法接受一个参数。
- value(字符型):结束符号的值。
HTML
<div id="emailEditor" ng-controller="MyController">
<input ng-model="to"
type="email"
placeholder="Recipient" />
<textarea ng-model="emailBody"></textarea>
<div id="emailPreview">
<pre>__ previewText __</pre>
</div>
</div>
JAVASCRIPT
angular.module('myApp', ['emailParser'])
.controller('MyController',
['$scope', 'EmailParser',
function($scope, EmailParser) {
$scope.to = 'ari@fullstack.io';
$scope.emailBody = 'Hello __to__';
// Set up a watch
$scope.$watch('emailBody', function(body) {
if (body) {
$scope.previewText =
EmailParser.parse(body, {
to: $scope.to
});
}
});
}]);
angular.module('emailParser', [])
.config(['$interpolateProvider',
function($interpolateProvider) {
$interpolateProvider.startSymbol('__');
$interpolateProvider.endSymbol('__');
}])
.factory('EmailParser', ['$interpolate',
function($interpolate) {
// a service to handle parsing
return {
parse: function(text, context) {
var template = $interpolate(text);
return template(context);
}
};
}]);
要在字符串模板中做插值操作,需要在你的对象中注入$interpolate
[插值]服务
,下面的例子,我们会将它注入到一个控制中。
$interpolate服务是一个可以接受三个参数的函数,其中第一个参数是必需的。
-
text(字符串):一个包含字符插值标记的字符串。
-
mustHaveExpression(布尔值):如果将这个参数设为true,当传入的字符串不含有表达式会返回null.
-
trustedContend(字符串):AngularJS会对已经进行过字符插值操作的字符串通过$sec.getTrusted()方法进行严格的上下文转义。
$interpolate服务返回一个函数,用来在特定的上下文中运算表达式。
设置好这些参数后,就可以在控制器中进行字符插值了。
如:我们可以在电子邮件的正文中进行实时编辑,当文本发生变化时进行字符插值操作并将结果
展示出来。
HTML
<div ng-controller="MyController">
<input ng-model="to" type="text" placeholder="test-text" />
<textarea ng-model="emailBody" id="" cols="30" rows="10"></textarea>
<pre>{{ previewText }}</pre>
</div>
JAVASCRIPT
var app = angular.module('myApp', [])
app.controller('MyController', function($scope, $interpolate) {
$scope.$watch('emailBody', function(body) {
if (body) {
var template = $interpolate(body);
$scope.previewText = template({to: $scope.to});
}
});
});
*如果没有对应的字符串插值,那么就正常显示输入的内容。