一: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. unity, 查看build版log文件

    http://blog.theknightsofunity.com/accessing-unity-game-logs/

  2. react相关知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  3. jquery技巧总结

    jquery技巧总结一.简介 1.1.概述随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype.YUI.jQuery.mootool ...

  4. eclipse中tomcat加gc日志输出

    -XX:ParallelGCThreads=4 -XX:+PrintGCDetails

  5. smarty变量调节器案例

    要求: 如下图,有内容的每一行,当鼠标放上去显示灰色区域,当鼠标离开灰色区域消失

  6. VS2010打开项目时，出现“已经在解决方案中打开了具有该名称的项目”问题的解决方案

    用的是VSS代码管理.一打开解决方案就看到有个类库不能加载. 解决方法: 直接右键编辑无法加载的类库,或者记事本编辑有问题类库的csproj文件, 删除以下几行: <SccProjectName ...

  7. SPOJ #2 Prime Generator

    My first idea was Sieve of Eratosthenes, too. But obviously my coding was not optimal and it exceede ...

  8. Add 4 multipath LUNs into RHEL

    1. SSH to oracle-node1 and run the following commands: # echo "- - -" > /sys/class/scsi ...

  9. 我的IT相关网址收藏

    it语言学习免费视频: 尚学堂:http://www.sxt.cn/ 慕课网:http://www.imooc.com/course/list 大学生自学网:http://v.dxsbb.com/ 尚 ...

  10. 安装配置Oracle数据库时的一些处理思路

    配置Oralce客户端或者服务器端出现问题时,可考虑如下步骤: 1 检查如下文件:client端:D:\app\Administrator\product\11.2.0\client_3\networ ...