Angularjs手动解析表达式($parse)

 更新时间:2016年10月12日 09:33:54   作者:冰果在线  
这篇文章主要介绍了Angularjs手动解析表达式($parse)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

下面一段代码给大家介绍了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),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js中开关变量使用实例

    js中开关变量使用实例

    本文主要分享了js中开关变量使用实例的代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript学习网址备忘

    javascript学习网址备忘

    javascript学习网址备忘...
    2007-05-05
  • JavaScript实现简易计算器案例

    JavaScript实现简易计算器案例

    这篇文章主要为大家详细介绍了JavaScript实现简易计算器案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下<BR>
    2022-07-07
  • 微信小程序实现tab和swiper切换结合效果

    微信小程序实现tab和swiper切换结合效果

    这篇文章主要为大家详细介绍了微信小程序实现tab和swiper切换结合效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 浅析JavaScript定时器setTimeout的时延问题

    浅析JavaScript定时器setTimeout的时延问题

    这篇文章主要为大家详细介绍了JavaScript中定时器setTimeout有最小时延的相关知识,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-11-11
  • 基于微信小程序实现人脸数量检测的开发步骤

    基于微信小程序实现人脸数量检测的开发步骤

    最近项目需求是统计当前摄像头中的人脸个数,所以下面这篇文章主要给大家介绍了关于基于微信小程序实现人脸数量检测的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • JS使用虚拟列表查看微信聊天记录功能技巧实例

    JS使用虚拟列表查看微信聊天记录功能技巧实例

    这篇文章主要为大家介绍了JS使用虚拟列表查看微信聊天记录功能技巧实例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • javascript Discuz代码中的msn聊天小功能

    javascript Discuz代码中的msn聊天小功能

    参考discuz的msn聊天功能代码
    2008-05-05
  • 利用Javascript开发一个二维周视图日历

    利用Javascript开发一个二维周视图日历

    这篇文章主要给大家介绍了关于利用Javascript如何开发一个二维周视图日历的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • BootStrap 导航条实例代码

    BootStrap 导航条实例代码

    本文通过实例代码给大家介绍了bootstrap导航条效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-05-05

最新评论