浅谈AngularJS中的$parse和$eval
$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.static.runoob.com/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.static.runoob.com/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.static.runoob.com/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>
