一: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. C#读写txt文件的两种方法介绍

    C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...

  2. js添加事件通用方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jquery点击改变图片src源码并toggle

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. sqlserver服务器常用的性能计数器

    sqlserver服务器常用的性能计数器,在此标记. 性能对象 计数器 说明 Processor %Processor Time %Privileged Time 建议值:持续低于80 建议值:持续低 ...

  5. WAS维护常用操作

    0.WAS学习地址: http://www.open-open.com/doc/list/276?pn=1http://www.doc88.com/p-7498799200332.htmlhttp:/ ...

  6. JSON.stringify(),JSON.parse(),toJSON()方法使用

    JSON.stringify(),将value(Object,Array,String,Number...)序列化为JSON字符串    JSON.parse(), 将JSON数据解析为js原生值   ...

  7. 如何制作带MFC界面的MFC DLL

    最近在做基于组件化MFC界面的开发,需要把界面封装到动态库中. 一:工程创建步骤 1.创建MFC DLL工程,选择 “在共享 DLL 中使用 MFC”. 2.运行时库选择:c/c++-->代码生 ...

  8. metaspolit教程

    网上的安装方式都是抄来抄去,我也抄了下,不过好歹自己试了下,有所不同 git clone https://github.com/rapid7/metasploit-framework.git vim ...

  9. 创建 Windows 7/8 的计算机修复光盘或工具

    Windows 7 Windows 8 控制面板--系统和安全--操作中心--恢复

  10. 【转】SQL SERVER DateTime类型的精度

    先看下边的SQL 语句 CREATE TABLE #DateTest( Id INT, SampleDate DATETIME ) INSERT INTO #DateTest VALUES(1,'1 ...