$parse和$eval都是用来将表达式转为一个函数
$eval是scope的一个方法，$parse是一种全局可以使用的服务。
从api可以看出来$eval是一种使用当前上下文的特殊$parse
// `$parse`$parse(expr)(context, locals);// `$eval`: //expr:要解析的表达式 //locals:上下文 function(expr, locals) {return $parse(expr)(this, locals);}
使用
<!DOCTYPE html><html ng-app="App"><head><meta charset="utf-8"><script src="http://cdn./libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-controller="Ctrl"><div>{{sayName}}</div><script>angular.module("App", []).controller("Ctrl", ["$scope","$parse",function($scope,$parse) {var context = {"name":"tom"};$scope.name = "chenjy";// ------------- 1 -------------$scope.sayName = $parse("'my name is '+ name")(context)// outPut: my name is tom// ------------- 2 -------------$scope.sayName = $parse("'my name is '+ name")($scope)// outPut: my name is chenjy// ------------- 3 -------------$scope.sayName = $parse("'my name is '+ name")()// outPut: my name is // ------------- 1 -------------$scope.sayName = $scope.$eval("'my name is '+ name");// outPut: my name is chenjy// ------------- 2 -------------$scope.sayName = $scope.$eval("'my name is '+ name",context);// outPut: my name is tom}]);</script></body></html>
我们用添加一个可以修改表达式的input，并且监听表达式当值发生变化重新解析
<!DOCTYPE html><html ng-app="App"><head><meta charset="utf-8"><script src="http://cdn./libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-controller="Ctrl"><div>{{sayName}}</div><input type="text" ng-model="expr" /><script>angular.module("App", []).controller("Ctrl", ["$scope", "$parse", function($scope, $parse) {$scope.con = {"name": "tom","myname": "chenjy"};$scope.expr = "'my name is '+ con.name";$scope.sayName = $parse($scope.expr)($scope)$scope.$watch("expr", function(newValue, oldValue, context) {if(newValue !== oldValue) {$scope.sayName = $parse(newValue)(context)}});}]);</script></body></html>
other
监听enter按键事件
<!DOCTYPE html><html ng-app="App"><head><meta charset="utf-8"><script src="http://cdn./libs/angular.js/1.4.6/angular.min.js"></script></head><body ng-controller="Ctrl"><input type="text" ng-enter="enterEvent()"><script>angular.module("App", []).controller("Ctrl", ["$scope", "$parse", function($scope, $parse) {$scope.enterEvent = function() {console.log("Press Enter!");};}]).directive('ngEnter', ["$parse", function($parse) {return function(scope, element, attrs) {element.bind("keydown keypress", function(event) {console.log(event);if(event.which === 13) {scope.$apply(function() {scope.$eval(attrs.ngEnter);/*$parse(attrs.ngEnter)(scope);*/});event.preventDefault();}});};}]);</script></body></html>
如果觉得《浅谈AngularJS中的$parse和$eval》对你有帮助，请点赞、收藏，并留下你的观点哦！
