一: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. sqlserver模糊查询【转】

    http://blog.csdn.net/liuxinxin1125/article/details/5444873 SELECT * FROM user WHERE name LIKE ';%三%' ...

  2. 在线网络速度测试JAVA程序（一）：思路和控制台主程序【转】

    来源:http://hancool.blog.51cto.com/1836252/1352228 事情的缘由 因上级公司的信息化主管部门经常被投诉说是各种业务应用系统反映系统使用慢的问题,而都把问题归 ...

  3. node js 常用模块

    前100个依赖库里,underscore是属于语言基础类,express是服务器框架,有5.6个测试框架.以及5.6个递归遍历目录树的工具类.3个左右的命令行解析工具类,3个主流数据库的链接clien ...

  4. Why we made vorlon.js and how to use it to debug your JavaScript remotely

    Vorlon.js is powered by node.JS, socket.io, and late-night coffee. I would like to share with you wh ...

  5. 在.net中序列化读写xml方法的总结

    在.net中序列化读写xml方法的总结 阅读目录 开始 最简单的使用XML的方法 类型定义与XML结构的映射 使用 XmlElement 使用 XmlAttribute 使用 InnerText 重命 ...

  6. Settings.System.getInt获取Setting里的设置信息

    数据库的路径:/data/data/com.android.providers.settings. 获取飞行模式: Settings.System.getInt(mContext.getContent ...

  7. (转)JS保留两位小数 四舍五入函数

    本文转载自:http://www.cnblogs.com/446557021/archive/2011/10/13/2211047.html js 四舍五入函数 toFixed(),里面的参数 就是保 ...

  8. SVN:通过Client端打tag

    教你如何使用svnClient打tag~给公司人用的! 1.进入代码主目录 2.右击空白处“TortoiseSVN”—->“Branch/tag” 3.点地址栏右侧的 (选择tags存放目录) ...

  9. 【Linux】系统之vmstat&iostat

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题. iostat常见用法: $iostat -d -k 1 10 #查看TPS和吞吐量 ...

  10. 【转】一道SQL SERVER DateTime的试题

    学习过上一篇SQL SERVER DateTime精度的文章后.再来做一道题. IF ('2011-07-31 00:00:00.000' BETWEEN '2011-07-01' and '2011 ...