说说AngularJS中的$parse和$eval的用法

AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval。

总的来说,$parse和$eval都是作用于AngularJS的表达式。

什么是表达式?

AngularJS中的表达式就是一些类似于JavaScript代码代码片段(但是它们和JavaScript代码有不尽相同)。表达式通常被用来防止在绑定中,例如{{expression}}。下面是一个例子:

1 + 2 = {{ 1 + 2 }}

或者:

My name is {{ user.name }}

$parse服务

$parse服务可以讲一个表达式转换为一个函数。这个函数可以被调用,其中的参数是一个上下文对象,通常来说是作用域。

另外,通过$parse的表达式返回的这个函数一个assign属性。这个assign属性也是一个函数,它可以用来在给定的上下文中改变这个表达式的值。

下面是一段简单的代码

rush:xhtml;">
testing
rush:js;"> app.directive('myDirective',function($log,$parse){ return function(scope,elem,attrs){ //解析"my-attr属性值到一个函数中" var model = $parse(attrs.myAttr); //model现在是一个函数,可以调用它来获取表达式的值 //下面这行代码将会输出作用域中obj.name的值 $log.log(model(scope));
elem.bind('click',function(){
//'model.assign'也是<a href="https://www.jb51.cc/tag/yige/" target="_blank" class="keywords">一个</a><a href="https://www.jb51.cc/tag/hanshu/" target="_blank" class="keywords">函数</a>,它用来更新表达式的值 
model.assign(s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e,'New name');
s<a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>e.$apply();
})

}
});

上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name,那么我们完全可以不用$parse,只用scope[attrs.myAttr]即可。但是在上面的例子中,方括号并不管用。

$eval服务

$eval是一个作用域scope中的方法,它将会在当前作用域中执行一个表达式并返回结果:

rush:js;"> scope.a = 1; scope.b = 2;

scope.$eval('a+b'); // 3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...