浅谈AngularJS中的$parse和$eval

AngularJS中$parse与$eval详解

最新推荐文章于 2025-07-05 23:11:01 发布

weixin_30621919

最新推荐文章于 2025-07-05 23:11:01 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chenjy1225/p/9851770.html

$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>

转载于:https://www.cnblogs.com/chenjy1225/p/9851770.html