认识 AngularJS中的$parse和$eval
2019/04/21 08:47:42 来源:Linux社区 作者:Linux

$parse和$eval都是用来将表达式转为一个函数

$eval是scope的一个方法,$parse是一种全局可以使用的服务。

从api可以看出来$eval是一种使用当前上下文的特殊$parse

// `$parse`

$parse(expr)(context, locals);

// `$eval`:
//      expr:要解析的表达式
//      locals:上下文 

function(expr, locals) {
        return $parse(expr)(this, locals);
      }

认识 AngularJS中的$parse和$eval

使用

<!DOCTYPE html>
<html ng-app="App">
    <head>
        <meta charset="utf-8">
        <script src="https://www.linuxidc.com/tools/libs/angular.js/1.7.8/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":"Linux公社www.linuxidc.com"
                        };
               
                        $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 Linux公社www.linuxidc.com
                       
                    }]);
        </script>
    </body>
</html>


我们用添加一个可以修改表达式的input,并且监听表达式当值发生变化重新解析

<!DOCTYPE html>
<html ng-app="App">

    <head>
        <meta charset="utf-8">
        <script src="https://www.linuxidc.com/tools/libs/angular.js/1.7.8/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="https://www.linuxidc.com/tools/libs/angular.js/1.7.8/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>

在Ubuntu 18.04上安装Angular图文详解  https://www.linuxidc.com/Linux/2019-04/157972.htm

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

本文永久更新链接地址https://www.linuxidc.com/Linux/2019-04/158202.htm


6

本栏最新