说说AngularJS中的$parse和$eval的用法
更新时间：2017年09月14日 09:20:43 作者：stephenykk
本篇文章主要介绍了说说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属性也是一个函数，它可以用来在给定的上下文中改变这个表达式的值。
下面是一段简单的代码：
<div my-attr="obj.name" my-directive>testing</div>
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'也是一个函数，它用来更新表达式的值
model.assign(scope,'New name');
scope.$apply();
})
}
});
上面的例子可以充分体现我们为什么需要$parse服务。如果属性值是name，那么我们完全可以不用$parse，只用scope[attrs.myAttr]即可。但是在上面的例子中，方括号并不管用。
$eval服务
$eval是一个作用域scope中的方法，它将会在当前作用域中执行一个表达式并返回结果：
scope.a = 1;
scope.b = 2;
scope.$eval('a+b'); // 3
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
依赖注入(DI -- Dependency Injection)是一种重要的应用设计模式。Angular里面也有自己的DI框架，在设计应用时经常会用到它，它可以我们的开发效率和模块化程度。 Angular系统中通过在类上添加@Injectable装饰器来告诉系统这个类(服务)是可注入的。2021-05-05
大家都知道依赖注入式AngularJS的重要特性之一，之前我们已经介绍了关于Angular 4依赖注入基础的内容，下面这篇文章主要给大家介绍了关于Angular 4依赖注入之组件服务注入的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。2017-06-06
AngularJS是如今最受欢迎的JS框架之一，简化开发过程是它的目标之一，这使得它非常适合于元型较小的apps的开发，但也扩展到具有全部特征的客户端应用的开发。下面给大家总结了AngularJS开发者最常犯的十个错误，有需要的可以参考学习下。2016-08-08
这篇文章主要为大家介绍了monaco editor在Angular的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要为大家介绍了Angular Tree Shaking优化机制原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
今天小编就为大家分享一篇AngularJs返回前一页面时刷新一次前面页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
Ionic + Angular.js实现验证码倒计时功能的方法
验证码倒计时这个功能相信对大家每个人来说都不陌生，之前介绍了在Android中的实现方法，下面这篇文章主要给大家介绍了利用Ionic + Angular.js实现验证码倒计时功能的相关资料，文中介绍的非常详细，需要的朋友们下面来一起看看吧。2017-06-06
这篇文章主要为大家详细介绍了AngularJS路由实现页面跳转的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
angular2 ng2-file-upload上传示例代码
这篇文章主要介绍了angular2 ng2-file-upload上传示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
AngularJS使用ng-repeat遍历二维数组元素的方法详解
这篇文章主要介绍了AngularJS使用ng-repeat遍历二维数组元素的方法,结合实例形式分析了AngularJS二维数组元素遍历的相关操作技巧,需要的朋友可以参考下2017-11-11
最新评论