Angularjs手动解析表达式($parse)


Posted in Javascript onOctober 12, 2016

下面一段代码给大家介绍了angularjs手动解析表达式($parse),具体代码如下所示:

<!DOCTYPE html>
<html lang="zh-CN" ng-app="app">
<head>
<meta charset="utf-8">
<title>手动解析表达式($parse)</title>
<link rel="stylesheet" href="../bootstrap.min.js">
</head>
<body ng-controller="myController">
<div ng-controller="myController">
<input type="text" ng-model="expr" placeholder="enter an expression">
<h2>{{ parsedValue }}</h2>
</div>
<script src="../angular.min.js"></script>
<script>
angular.module('app', [])
.controller('myController', function($scope, $parse) {
$scope.$watch('expr', function(newVal, oldVal, s) {
if(newVal !== oldVal) {
var parseFun = $parse(newVal);
$scope.parsedValue = parseFun(s);
// 使用链式调用的方式 你也可以这样写 
// $scope.parsedValue = $parse(newVal)(s);
}
})

})
</script>
</body>
</html>

补充:解析AngularJS表达式

尽管AngularJS会在运行$digest循环的过程中自动解析表达式,但有时手动解析表达式也是非常有用的。AngularJS通过$parse这个内部服务来进行表达式的运算,这个服务能够访问当前所处的作用域。这个过程允许我们访问定义在$scope上的原始JavaScript数据和函数。将$parse服务注入到控制器中,然后调用它就可以实现手动解析表达式。举例来说,如果页面上有一个输入框绑定到了expr变量上,如下所示:

<div ng-controller="MyController">
<input ng-model="expr"
type="text"
placeholder="Enter an expression" />
<h2>{{ parseValue }}</h2>
</div>

我们可以在MyController中给expr这个表达式设置一个$watch并解析它:

angular.module("myApp", [])
.controller('MyController',
function($scope,$parse) {
$scope.$watch('expr', function(newVal, oldVal, scope) {
if (newVal !== oldVal) {
// 用该表达式设置parseFun
var parseFun = $parse(newVal);
// 获取经过解析后表达式的值$scope.parsedValue = parseFun(scope);
}});
});

以上所述是小编给大家介绍的Angularjs手动解析表达式($parse),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery find和children方法使用
Jan 31 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
js实现屏幕自适应局部代码分享
Jan 30 Javascript
js弹出对话框方式小结
Nov 17 Javascript
莱鸟介绍window.print()方法
Jan 06 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
Dec 08 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 #Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
Oct 12 #Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 #Javascript
详解Javascript中的原型OOP
Oct 12 #Javascript
浅析BootStrap Treeview的简单使用
Oct 12 #Javascript
jquery自定义表单验证插件
Oct 12 #Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 #Javascript
You might like
php分页函数
2006/07/08 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
学习php设计模式 php实现合成模式(composite)
2015/12/08 PHP
PHP中的session安全吗?
2016/01/22 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
javascript ie6兼容position:fixed实现思路
2013/04/01 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
javascript关于继承解析
2016/05/10 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
自定义require函数让浏览器按需加载Js文件
2016/11/24 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
python中pygame模块用法实例
2014/10/09 Python
Python网络爬虫出现乱码问题的解决方法
2017/01/05 Python
python使用配置文件过程详解
2019/12/28 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
PyCharm刷新项目(文件)目录的实现
2020/02/14 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
美国皮靴公司自1863年:The Frye Company
2016/11/30 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
公司财务总监岗位职责
2013/12/14 职场文书
儿子婚宴答谢词
2014/01/09 职场文书
中学教师请假制度
2014/02/03 职场文书
纠风工作实施方案
2014/03/15 职场文书
《地震中的父与子》教学反思
2014/04/10 职场文书
英语教师个人工作总结
2015/02/09 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript