AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
更新时间：2016年01月25日 11:41:50 投稿：mrr
这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下
在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve，其表格的表现方式是这样的：
<table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper>
以上，变量colmnmap的值是事先定义在了Scope中的：
return {
restrict: 'E',
scope: {
columnmap: '=',
datasource: '='
},
link:link,
template:template
};
AngularJS中，还有一种运行时给Scope变量赋值的办法，那就是在link函数中使用$parse或$eval方法。
在Direcitve的呈现方面和以前一致：
<table-helper-with-parse datasource="customers" columnmap="[{name: 'Name'},...]"></table-helper-with-parse>
Directive大致是这样：
var tableHelperWithParse = function($parse){
var template = "",
link = function(scope, element, attrs){
var headerCols = [],
tableStart = '<table>',
tableEnd = '</table>',
table = '',
visibleProps = [],
sortCol = null,
sortDir = 1,
columnmap = null;
$scope.$watchCollection('datasource', render);
//运行时赋值columnmap
columnmap = scope.$eval(attrs.columnmap);
//或者
columnmap = $parse(attrs.columnmap)();
wireEvents();
function rener(){
if(scope.datasource && scope.datasourse.length){
table += tableStart;
table += renderHeader();
table += renderRows() + tableEnd;
renderTable();
}
}
};
return {
restrict: 'E',
scope: {
datasource: '='
},
link: link,
template: template
}
}
angular.module('direcitvesModule')
.directive('tableHelperWithParse', tableHelperWithParse);
下面给大家介绍下$parse和$eval的不同
首先，$parse跟$eval都是用来解析表达式的， 但是$parse是作为一个单独的服务存在的。$eval是作为scope的方法来使用的。
$parse典型的使用是放在设置字符串表达式映射在真实对象上的值。也可以从$parse上直接获取到表达式对应的值。
var getter = $parse('user.name');
var setter = getter.assign;
setter(scope, 'new name');
getter(context, locals) // 传入作用域，返回值
setter(scope,'new name') // 修改映射在scope上的属性的值为‘new value'
$eval 即scope.$eval，是执行当前作用域下的表达式，如：scope.$eval('a+b'); 而这个里的a,b是来自 scope = {a: 2, b:3};
看看源码它的实现是
$eval: function(expr, locals) {
return $parse(expr)(this, locals);
},
可以找到它也是基于$parse，不过它的参数已经被固定为this，就是当前的scope，所以$eval只是在$parse基础上的封装而已，是一种$parse快捷的API。
相关文章
这篇文章主要介绍了AngularJS实现DOM元素的显示与隐藏功能,涉及AngularJS中ng-hide与ng-show两个属性的使用,需要的朋友可以参考下2016-11-11
这篇文章主要介绍了AngularJS bootstrap启动的知识，这里整理了相关资料及简单实例代码，,需要的朋友可以参考下2016-09-09
本篇文章主要介绍了AngularJs之过滤器（filter）详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
Angular设计模式hierarchical injector实现代码复用模块化
这篇文章主要为大家介绍了Angular设计模式hierarchical injector实现代码复用模块化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-10-10
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码，重复密码的时候一键入就会提示密码不正确。现在小编给大家整理了两种方法，需要的的朋友参考下吧2017-05-05
AngularJS中监视Scope变量以及外部调用Scope方法
在AngularJS中，有时候需要监视Scope中的某个变量，因为变量的改变会影响一些界面元素的显示，接下来通过本文给大家介绍AngularJS中监视Scope变量以及外部调用Scope方法，需要的朋友参考下吧2016-01-01
这篇文章主要介绍了AngularJS API之equal比较对象的相关资料,需要的朋友可以参考下2016-09-09
angularjs ocLazyLoad分步加载js文件实例
本篇文章主要介绍了angularjs ocLazyLoad分步加载js文件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要为大家详细介绍了AngularJS 避繁就简的路由的相关资料，感兴趣的小伙伴们可以参考一下2016-07-07
Angular.js中angular-ui-router的简单实践
本篇文章主要介绍了Angular.js中angular-ui-router的简单实践，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
最新评论