一: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, ugui input field

    ugui Input Field,获取输入的字符串. 错误方法: string content=inputField.FindChild("Text").text; 这样得到的是输 ...

  2. c#, 输出二进制

    int x=-17; string str= Convert.ToString(x,2);Debug.Log(str); 输出结果: 11111111111111111111111111101111 ...

  3. OpenJudge计算概论-单词排序

    /*===================================== 单词排序 总时间限制:1000ms 内存限制: 65536kB 描述 输入一行单词序列,相邻单词之间由1个或多个空格间隔 ...

  4. 3 TKinter设置宽高及背景色

    代码示例 #!/usr/bin/env python # _*_ coding:utf-8 _*_ from Tkinter import * root = Tk() B1 = Button(root ...

  5. mysql将字符转换成数字

    在操作mysql时,经常需要将字符转换成数字,这一步虽然简单,但不常用的话也很容易忘记,现将在网上找到的方法记录如下: 1.将字符的数字转成数字,比如'0'转成0可以直接用加法来实现例如:将pony表 ...

  6. ExtJs学习之Window

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. SQL 查询本月无数据用上个月的数据问题

    SQL 查询本月无数据用上个月的数据 前言 因为标题有长度限制,先简要说明一下应用场景.比如我们要查一段时间范围内(2013-08-01至2013-12-31)每个月每个运营商的用户总量,每个运营商用 ...

  8. Python函数,参数,变量

    func1.py def sayHello(): print ('hello world') sayHello() func_parm.py def printMax(a,b): if a>b: ...

  9. android学习笔记23——菜单

    菜单在桌面应用程序中使用非常广泛,由于手机屏幕的制约,菜单在手机应用中减少不少. android应用中的菜单默认是不可见的,只有当用户单击手机上“Menu”键时,系统才会显示该应用关联的采用项. an ...

  10. xorm使用pgsql的例子

    测试表 /* Navicat Premium Data Transfer Source Server : localhost Source Server Type : PostgreSQL Sourc ...