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+ajax实现顶一下,踩一下效果
Jul 17 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
JS实现div居中示例
Apr 17 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
TypeScript 中接口详解
Jun 19 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
js new Date()实例测试
Oct 31 Javascript
纯JS开发baguetteBox.js响应式画廊插件
Jun 28 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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使用SOAP扩展实现WebService的方法
2016/04/01 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
Bootstrap源码解读模态弹出框(11)
2016/12/28 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
[37:45]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第二场 12.09
2020/12/11 DOTA
深入理解Python中变量赋值的问题
2017/01/12 Python
pycharm安装和首次使用教程
2018/08/27 Python
python实现猜拳小游戏
2020/04/05 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python PyQt5模块实现窗口GUI界面代码实例
2020/05/12 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
浅谈css3中calc在less编译时被计算的解决办法
2017/12/04 HTML / CSS
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
师德师风承诺书
2014/05/23 职场文书
借名购房协议书范本
2014/10/06 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
反邪教观后感
2015/06/11 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript