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的一些注意
Dec 06 Javascript
jquery创建div 实现代码
Apr 27 Javascript
FF IE兼容性的修改小结
Sep 02 Javascript
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
May 15 jQuery
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
vue路由拦截及页面跳转的设置方法
May 24 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
vue和iview实现Scroll 数据无限滚动功能
Oct 31 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的QRcode类与大家分享
2011/11/13 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
php用ini_get获取php.ini里变量值的方法
2015/03/04 PHP
设定php简写功能的方法
2019/11/28 PHP
javascript编程起步(第五课)
2007/02/27 Javascript
js 匿名调用实现代码
2009/06/19 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
Javascript中判断对象是否为空
2015/06/10 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
2018/12/20 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
python自动化报告的输出用例详解
2018/05/30 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
Python函数装饰器常见使用方法实例详解
2019/03/30 Python
python用win32gui遍历窗口并设置窗口位置的方法
2019/07/26 Python
Python读取实时数据流示例
2019/12/02 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python解析微信dat文件的方法
2020/11/30 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
十一个高级MySql面试题
2014/10/06 面试题
金融专业个人求职信范文
2013/11/28 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
蜗居观后感
2015/06/11 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android