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事件实现代码
Mar 12 Javascript
jquery each()源代码
Feb 14 Javascript
JS构建页面的DOM节点结构的实现代码
Dec 09 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
Jul 31 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
Dec 10 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
详解element-ui动态限定的日期范围选择器代码片段
Jul 03 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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
关于mysql 字段的那个点为是定界符
2007/01/15 PHP
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
php将从数据库中获得的数据转换成json格式并输出的方法
2018/08/21 PHP
javascript innerHTML使用分析
2010/12/03 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
基于input动态模糊查询的实现方法
2017/12/12 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
2018/08/16 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
element el-table表格的二次封装实现(附表格高度自适应)
2021/01/19 Javascript
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
Python3.6简单反射操作示例
2018/06/14 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
临床医学专业毕业生的自我评价
2013/10/17 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
故宫导游词
2015/01/31 职场文书
2015年电工工作总结
2015/04/10 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL