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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
JavaScript中两种链式调用实现代码
Jan 12 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery+Ajax实现无刷新操作
Jan 04 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
Oct 25 Javascript
vue-cli中使用高德地图的方法示例
Mar 28 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
phpmyadmin操作流程
2006/10/09 PHP
文件上传的实现
2006/10/09 PHP
ob_start(),ob_start('ob_gzhandler')使用
2006/12/25 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
利用php_imagick实现复古效果的方法
2016/10/18 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
JS执行删除前的判断代码
2014/02/18 Javascript
JQuery $.each遍历JavaScript数组对象实例
2014/09/01 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
2016/04/18 Javascript
AnjularJS中$scope和$rootScope的区别小结
2016/09/18 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
Python使用装饰器进行django开发实例代码
2018/02/06 Python
PyQT实现多窗口切换
2018/04/20 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python requests.get带header
2020/05/05 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
JBL澳大利亚官方商店:扬声器、耳机和音响系统
2018/05/24 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
竞选学习委员演讲稿
2014/09/01 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2016继续教育研修日志
2015/11/13 职场文书
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
python迷宫问题深度优先遍历实例
2021/06/20 Python
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
golang为什么要统一错误处理
2022/04/03 Golang
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript