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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
JS 强制设为首页的代码
Jan 31 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
JavaScript实现Tab选项卡切换
Feb 13 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 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基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
js 加载并解析XML字符串的代码
2009/12/13 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
nodejs分页类代码分享
2014/06/17 NodeJs
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
2017/07/08 jQuery
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
6行代码实现微信小程序页面返回顶部效果
2018/12/28 Javascript
vue实现微信分享链接添加动态参数的方法
2019/04/29 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
如何准确判断请求是搜索引擎爬虫(蜘蛛)发出的请求
2015/10/13 Python
python九九乘法表的实例
2017/09/26 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python 检查文件mime类型的方法
2018/12/08 Python
使用Pandas将inf, nan转化成特定的值
2019/12/19 Python
python+opencv实现车牌定位功能(实例代码)
2019/12/24 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
python smtplib发送多个email联系人的实现
2020/10/09 Python
HTML5中的nav标签学习笔记
2016/06/24 HTML / CSS
捷克时尚网上商店:OTTO
2018/03/15 全球购物
PHP面试题集
2016/12/18 面试题
学前教育求职自荐信范文
2013/12/25 职场文书
员工年终演讲稿
2014/01/03 职场文书
高二物理教学反思
2014/02/08 职场文书
个人综合鉴定材料
2014/05/23 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年手术室工作总结
2014/11/26 职场文书
消费者理赔投诉书
2015/07/02 职场文书