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浏览器的event事件兼容性汇总
Dec 06 Javascript
你必须知道的JavaScript 变量命名规则详解
May 07 Javascript
js验证IP及子网掩码的合法性有效性示例
Apr 30 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
jQuery实现长按按钮触发事件的方法
Feb 02 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
AngularJS监听路由变化的方法
Mar 07 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
vue 源码解析之虚拟Dom-render
Aug 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中is_dir()函数使用指南
2015/05/08 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
在vue中解决提示警告 for循环报错的方法
2018/09/28 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
js实现列表按字母排序
2020/08/11 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python 发送和接收ActiveMQ消息的实例
2019/01/30 Python
selenium python 实现基本自动化测试的示例代码
2019/02/25 Python
python中web框架的自定义创建
2019/09/08 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
linux面试相关问题
2012/08/11 面试题
新颖的化妆品活动方案
2014/08/21 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
2014年创先争优工作总结
2014/12/11 职场文书
学生保证书
2015/01/16 职场文书
2015年大学生实习评语
2015/03/25 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
上级领导检查欢迎词
2015/09/30 职场文书