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操作二级联动实现代码
Jul 27 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 Javascript
理解 JavaScript EventEmitter
Mar 29 Javascript
快速解决vue-cli在ie9+中无效的问题
Sep 04 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
Vue和Flask通信的实现
May 19 Vue.js
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利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
Vuex 快速入门(简单易懂)
2018/09/20 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
详解从vue-loader源码分析CSS Scoped的实现
2019/09/23 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python 3.6 tkinter+urllib+json实现火车车次信息查询功能
2017/12/20 Python
Python工厂函数用法实例分析
2018/05/14 Python
python简单操作excle的方法
2018/09/12 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python创建学生管理系统
2019/11/22 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python中wx模块的具体使用方法
2020/05/15 Python
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
会计学专业求职信
2014/07/17 职场文书
党性锻炼的心得体会
2014/09/03 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
2015年七夕情人节感言
2015/08/03 职场文书
python中%格式表达式实例用法
2021/06/18 Python
关于springboot配置druid数据源不生效问题(踩坑记)
2021/09/25 Java/Android