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 添加千分位与去掉千分位的示例
Jul 11 Javascript
Javascript自定义函数判断网站访问类型是PC还是移动终端
Jan 10 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
js判断两个数组相等的5种方法
May 06 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
基于pear auth实现登录验证
2010/02/26 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
php xhprof使用实例详解
2019/04/15 PHP
jQuery timers计时器简单应用说明
2010/10/28 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
javascript中this指向详解
2016/04/23 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
BootStrap整体框架之基础布局组件
2016/12/15 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
Python入门学习之字符串与比较运算符
2015/10/12 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
婚前保证书
2014/04/29 职场文书
2015年社区统计工作总结
2015/04/21 职场文书
教师节座谈会主持词
2015/07/03 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL