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 相关文章推荐
JS控件的生命周期介绍
Oct 22 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
JS控制伪元素的方法汇总
Apr 06 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
Oct 23 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
微信小程序实现的一键复制功能示例
Apr 24 Javascript
JavaScript实现拖拽功能
Feb 11 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数据库调用类调用实例(详细注释)
2012/07/12 PHP
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
网页常用特效代码整理
2006/06/23 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
html页面显示年月日时分秒和星期几的两种方式
2013/08/20 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
Javascript中神奇的this
2016/01/20 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
js的三种继承方式详解
2017/01/21 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
js简单实现网页换肤功能
2017/04/07 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
vue-cli3中配置alias和打包加hash值操作
2020/09/04 Javascript
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python实现ID3决策树算法
2017/12/20 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
python中删除某个元素的方法解析
2019/11/05 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
详解python对象之间的交互
2020/09/29 Python
PyChon中关于Jekins的详细安装(推荐)
2020/12/28 Python
python 实现百度网盘非会员上传超过500个文件的方法
2021/01/07 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
Nixon手表英国官网:美国尼克松手表品牌
2020/02/10 全球购物
模范教师事迹材料
2014/02/10 职场文书
财务主管岗位职责
2014/02/28 职场文书
市场策划求职信
2014/08/07 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书