AngularJs深入理解表达式

表达式在AngularJs应用中广泛使用,因此深入理解AngularJs如何使用并运算表达式是非常重要的。

表达式的示例,用{{ }}符号将一个变量绑定到$scope对象上的写法本质上就是一个表达式{{ expression }}。当用$watch监听时,AngularJs会对表达式或者函数进行运算。

表达式和eval(Javascript)非常相似,但是由于表达式由AngularJs处理,他们有以下显著不同的特点:

 所有的表达式都在其所属的作用域内部执行,并有访问本地 $scope 的权限;
 如果表达式发生了 TypeError 和 ReferenceError 并不会抛出异常;
 不允许使用任何流程控制功能(条件控制,例如 if/eles );
 可以接受过滤器和过滤器链。

对表达式进行的任何操作,都会在其所属的作用域内部执行,因此可以在表达式内部调用那些限制在此作用域内的变量,并进行循环、函数调用、将变量应用到数学表达式中等操作。

1、解析 AngularJS 表达式

尽管AngularJs会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是非常有用的。

AngularJs通过$parse这个内部服务来进行表达式的运算,这个服务能够访问当前所在的作用域,这个过程允许我们访问定义在$scope上的原始Javascript数据核函数。

将$parse服务注入到控制器中,然后调用它就可以实现手动解析表达式。看下面的栗子:

/*ng-app = 'myApp'*/
<div ng-controller="MyController">
	<input type="text" placeholder="Enter The Expression" ng-model="expr"/>
	<h2>{{parseValue}}</h2>
</div>

angular.module('myApp',[])
.controller('MyController',['$scope','$parse',function($scope,$parse){
	$scope.$watch = ('expr',function(newVal,oldVal ,scope){
		if(oldVal !== newVal){
			var parseFun = $parse(newVal)
			$scope.parseValue = parseFun (scope)
		}
	})
}])
发布了23 篇原创文章 · 获赞 10 · 访问量 409

猜你喜欢

转载自blog.csdn.net/qq_35593965/article/details/103275075