angularjs之表达式

最新推荐文章于 2020-07-28 10:22:16 发布

weixin_45861144

最新推荐文章于 2020-07-28 10:22:16 发布

阅读量216

点赞数

分类专栏：前端文章标签： angularjs web前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1hj21k21k0j&title=angularjs%E4%B9%8B%E8%A1%A8%E8%BE%BE%E5%BC%8F

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一:angularjs表达式的解析

angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的.

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

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div ng-controller="myController">
            <p>
                <input ng-model="expr" type="text" placeholder="表达式值" />    
            </p>
            <pre>rrgffyy{{parseValue}}</pre>
            
        </div>
    </body>
    <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("myController",function($scope,$parse){
            $scope.$watch("expr",function(newVal,oldVal,scope){
                if(newVal!=oldVal){
                    //用该表达式设置parseFun
                    var parseFun=$parse("expr");
                    //获取经过解析后表达式的值
                    $scope.parseValue=parseFun(scope);
                }
            });
        })
    </script>
</html>

这只是单纯的对页面上的angular表达式解析,但是有时候我们想要对一段字符串进行解析,将字符串中的angularjs表达式解析成我们需要的值.如何做呢.

二:解析字符串.

在字符串模版中做表达式的解析,需要在你的对象中注入$interpolate服务.

$interpolate(text,mustHaveExpression,trustedContext)服务是一个可以接受三个参数的字符串.

text(字符串):字符串模板

mustHaveExpression(布尔值):如果这个值是true,当传入的字符串中不含有表达式时会返回null

trustedContext(字符串):angularJs会对已经进行过字符串插值操作的字符串通过$sec.getTrusted()方法严格的上下文转义.

$interpolate服务返回一个函数,用来在特定的上下文中运算表达式.

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div ng-controller="myController">
            <p>
                <input ng-model="name" type="text" placeholder="姓名" />    
            </p>
            <pre>{{previewText}}</pre>
            
        </div>
    </body>
    <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script>
    <script type="text/javascript">
        angular.module("myApp",[])
        .controller("myController",function($scope,$interpolate){
            var strTempl="大家好,我是{{name}}";
            $scope.$watch("name",function(name){
                if(name){
                    var template=$interpolate(strTempl);
                    $scope.previewText=template({name:$scope.name});
                }
            });
        });
    </script>
</html>

看看测试:

我们成功的对

var strTempl="大家好,我是{{name}}"

完成了解析.

利用这个原理我们来看一个更复杂一点的例子.

让我们的字符串模板是动态的.

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div ng-controller="myController">
            <p>
                <input ng-model="name" type="text" placeholder="姓名" />    
            </p>
            <p>
                <input ng-model="age" type="text" placeholder="年龄" />    
            </p>
            <textarea ng-model="strTempl"></textarea>
            <pre>{{previewText}}</pre>
            
        </div>
    </body>
    <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script>
    <script type="text/javascript" >
    angular.module("myApp",[])
.controller("myController",function($scope,$interpolate){
    var strTempl="大家好,我是{{name}}"
    $scope.$watch("strTempl",function(strTempl){
        if(strTempl){
            var template=$interpolate(strTempl);
            $scope.previewText=template({name:$scope.name,age:$scope.age});
        }
    });
});
    </script>
</html>

测试结果:

按照angularjs的编写规范,这里的字符串解析完全可以提取成一个服务.

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div ng-controller="myController">
            <p>
                <input ng-model="name" type="text" placeholder="姓名" />    
            </p>
            <p>
                <input ng-model="age" type="text" placeholder="年龄" />    
            </p>
            <textarea ng-model="strTempl"></textarea>
            <pre>{{previewText}}</pre>
            
        </div>
    </body>
    <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script>
    <script type="text/javascript">
    angular.module("emailParser",[])
.factory("EmailParser",["$interpolate",function($interpolate){
    return {
        parse:function(text,context){
            var template=$interpolate(text);
            return template(context);
        }
    }
}]);
angular.module("myApp",["emailParser"])
.controller("myController",["$scope","EmailParser",function($scope,EmailParser){
    $scope.$watch("strTempl",function(body){
        if(body){
            $scope.previewText=EmailParser.parse(body,{name:$scope.name,age:$scope.age});
        }
    });
}]);

    </script>
</html>

三.修改表达式的表示符

angularjs默认的表达式表示方法是:{{name}},双括号.

我现在要改成这样的.#{name};

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div ng-controller="myController">
            <p>
                <input ng-model="name" type="text" placeholder="姓名" />    
            </p>
            <p>
                <input ng-model="age" type="text" placeholder="年龄" />    
            </p>
            <textarea ng-model="strTempl"></textarea>
            <pre>#{previewText}</pre>
            
        </div>
    </body>
    <script type="text/javascript" src="js/angularJs-1.2.16-min.js" ></script>
    <script type="text/javascript">
    angular.module("emailParser",[])
    .config(["$interpolateProvider",function($interpolateProvider){
    $interpolateProvider.startSymbol("#{");
    $interpolateProvider.endSymbol("}");
}])
.factory("EmailParser",["$interpolate",function($interpolate){
    return {
        parse:function(text,context){
            var template=$interpolate(text);
            return template(context);
        }
    }
}]);
angular.module("myApp",["emailParser"])
.controller("myController",["$scope","EmailParser",function($scope,EmailParser){
    $scope.$watch("strTempl",function(body){
        if(body){
            $scope.previewText=EmailParser.parse(body,{name:$scope.name,age:$scope.age});
        }
    });
}]);

    </script>
</html>

测试结果:

weixin_45861144

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs之表达式

一:angularjs表达式的解析 angularjs会在运行$digest循环中自动解析表达式,但有时手动解析表达式也是非常用用的. angularjs通过$parse这个内部服务来进行表达式的运算...
复制链接

扫一扫