一: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>

测试结果:

angularjs之表达式的更多相关文章

  1. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  2. AngularJS：表达式

    ylbtech-AngularJS:表达式 1.返回顶部 1. AngularJS 表达式 AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS ...

  3. Angularjs –– Expressions(表达式)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular的表达式 Angular的表达式和JavaScript代码很像,不过通常A ...

  4. AngularJs解决表达式闪烁的问题（ng-cloak）

    举例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  5. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  6. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  7. AngularJS快速入门指南03：表达式

    AngularJS通过表达式将数据绑定到HTML. AngularJS表达式 AngularJS表达式写在双大括号中:{{ 表达式语句 }}. AngularJS表达式绑定数据到HTML的方式与ng- ...

  8. AngularJS 表达式 对象和数组

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  9. angularJS表达式详解！

    angularJS的表达式很像Javascript里的表达式:它可以包含文字,运算符和变量: angularJS 表达式: - 数字:{{100+100}} - 字符串:{{‘hello’+'angu ...

随机推荐

  1. ECS 安装redis 及安装PHPredis的扩展

    安装redis 1.一条命令就行了:apt-get install redis-server 2.wget http://download.redis.io/releases/redis-3.0.7. ...

  2. eclipse svn subclipse下载地址

    http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 Eclipse 3.x Subclipse release ...

  3. Java语言编码规范(Java Code Conventions)

    Java语言编码规范(Java Code Conventions) 名称 Java语言编码规范(Java Code Conventions) 译者 晨光(Morning) 简介 本文档讲述了Java语 ...

  4. 在Eclipse中使用JUnit4进行单元测试

    在Eclipse中使用JUnit4进行单元测试(初级篇) 在Eclipse中使用JUnit4进行单元测试(中级篇) 在Eclipse中使用JUnit4进行单元测试(高级篇)

  5. SqlServer参数化脚本与自动参数化（简单参数化）

    如果执行不带参数的SQL语句,SQL Server会在内部对该语句进行参数化以增加将其与现有执行计划相匹配的可能性.此过程称为简单参数化(在SQL Server 2000中,称为自动参数化),最终起到 ...

  6. ORACLE 常用数值函数

    1 ABS(n)返回数值弄参数的绝对值.它接受一个数值型值作为输入参数,或者任何可以隐式地转换为数值型值的值.并且返回数值型值的绝对值. Select abs(-1) from dual ABS(-1 ...

  7. RMAN备份与恢复之删除过期备份

    使用crosscheck backupset或crosscheck backup之后,提示所有备份集都为available状态,当他执行delete obsolete时,提示有两个文件需要删除.实际上 ...

  8. 关于今天mysql数据库的一系列问题

    首先,字符集的问题: mysql> show variables like 'character%';+--------------------------+------------------ ...

  9. bzoj4316: 小C的独立集

    Description 图论小王子小C经常虐菜,特别是在图论方面,经常把小D虐得很惨很惨. 这不,小C让小D去求一个无向图的最大独立集,通俗地讲就是:在无向图中选出若干个点,这些点互相没有边连接,并使 ...

  10. ASP.NET MSSQL 依赖缓存设置方法

    更多的时候,我们的服务器性能损耗还是在查询数据库的时候,所以对数据库的缓存还是显得特别重要,上面几种方式都可以实现部分数据缓存功能.但问题是我们的数据有时候是在变化的,这样用户可能在缓存期间查询的数据 ...