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 相关文章推荐
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
javascript常用函数(2)
Nov 05 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
AngularJS 简单应用实例
Jul 28 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
JavaScript函数基础详解
Feb 03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
js实现京东轮播图效果
Jun 30 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
Vue中的验证登录状态的实现方法
Mar 09 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
url decode problem 解决方法
2011/12/26 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
php和nginx交互实例讲解
2019/09/24 PHP
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
2011/10/22 Javascript
获取客户端电脑日期时间js代码(jquery)
2012/09/12 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
解决vue-cli 打包后自定义动画未执行的问题
2019/11/12 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
2020/09/08 Javascript
Python设计模式之MVC模式简单示例
2018/01/10 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
Nike荷兰官方网站:Nike.com (NL)
2018/04/19 全球购物
CK巴西官方网站:Calvin Klein巴西
2019/07/19 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
学年自我鉴定
2014/01/16 职场文书
校本教研工作制度
2014/01/22 职场文书
幼师求职信
2014/06/23 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
电力培训学习心得体会
2016/01/11 职场文书
Nginx快速入门教程
2021/03/31 Servers
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android