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 相关文章推荐
浅谈Javascript的静态属性和原型属性
May 07 Javascript
js实现TAB切换对应不同颜色的代码
Aug 31 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
微信小程序滚动Tab实现左右可滑动切换
Aug 17 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
原生js+cookie实现购物车功能的方法分析
Dec 21 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
JavaScript实现美化滑块效果
May 17 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
php adodb连接不同数据库
2009/03/19 PHP
php array_unique之后json_encode需要注意
2011/01/02 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
2010/03/25 Javascript
jquery监控数据是否变化(修正版)
2011/04/12 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript实现把rgb颜色转换成16进制颜色的方法
2015/06/01 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
vue刷新和tab切换实例
2018/02/11 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
应届毕业生求职自荐书
2014/01/03 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
教师研修随笔感言
2014/01/23 职场文书
大学生活动策划方案
2014/02/10 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
小学毕业典礼演讲稿
2014/09/09 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
志愿者爱心公益活动策划方案
2014/09/15 职场文书