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 相关文章推荐
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
微信小程序 template模板详解及实例
Feb 21 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
JS学习笔记之数组去重实现方法小结
May 29 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
js实现踩五彩块游戏
Feb 08 Javascript
Vue和React有哪些区别
Sep 12 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
深入理解js函数的作用域与this指向
2016/05/28 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
详解Python中的Lock和Rlock
2021/01/26 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
html5小技巧之通过document.head获取head元素
2014/06/04 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
客户服务经理岗位职责
2014/01/29 职场文书
四查四看剖析材料
2014/02/14 职场文书
考试诚信承诺书
2014/05/23 职场文书
同学聚会通知书
2015/04/20 职场文书
毕业证明模板
2015/06/19 职场文书
关于开学的感想
2015/08/10 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
python requests模块的使用示例
2021/04/07 Python