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 20 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
AngularJS控制器controller正确的通信的方法
Jan 25 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
javascript+jQuery实现360开机时间显示效果
Nov 03 jQuery
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
Vue中对iframe实现keep alive无刷新的方法
Jul 23 Javascript
vue中使用v-model完成组件间的通信
Aug 22 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
event.srcElement 用法笔记e.target
2009/12/18 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
Javascript call和apply区别及使用方法
2013/11/14 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
js闭包的用途详解
2014/11/09 Javascript
jQuery中:submit选择器用法实例
2015/01/03 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
分享12个非常实用的JavaScript小技巧
2016/05/11 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
2016/12/31 Javascript
JSONP基础知识详解
2017/03/19 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python requests.post带head和body的实例
2019/01/02 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
美术兴趣小组活动总结
2014/07/07 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书