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基础教程之简单介绍

    AngularJS基础教程之简单介绍

    本教程旨在帮助你尽可能快速而有效地学习AngularJS。通过该教程你会学习到AngularJS的一些基本特性,例如指令、表达式、过滤器、模块和控制器等。以及其它所有你需要知道的有关AngularJS的东西,如事件、DOM节点、表单、用户输入、数据验证、Http对象等。
    2015-09-09
  • 在Angular项目使用socket.io实现通信的方法

    在Angular项目使用socket.io实现通信的方法

    这篇文章主要介绍了在Angular项目使用socket.io实现通信的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • 使用Angular CLI生成路由的方法

    使用Angular CLI生成路由的方法

    这篇文章主要介绍了使用Angular CLI生成路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • AngularJS语法详解(续)

    AngularJS语法详解(续)

    本文续上文,接着介绍AngularJS语法,和上文一样,都是通过示例来向大家分析说明,非常不错的一篇文章,推荐给大家。
    2015-01-01
  • Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解

    这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-03-03
  • AngularJs bootstrap搭载前台框架——准备工作

    AngularJs bootstrap搭载前台框架——准备工作

    本文主要介绍AngularJs bootstrap搭载前台框架,这里对Bootstrap 搭载环境,及注意事项做了讲解,有需要的小伙伴可以参考下
    2016-09-09
  • ionic3+Angular4实现接口请求及本地json文件读取示例

    ionic3+Angular4实现接口请求及本地json文件读取示例

    本篇文章主要介绍了ionic3+Angular4实现接口请求及本地json文件读取示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • AngularJS实现按钮提示与点击变色效果

    AngularJS实现按钮提示与点击变色效果

    这篇文章给大家介绍了如何利用AngularJS实现按钮提示与点击变色的效果,文中提供了实例代码,对大家学习AngularJS具有一定的参考借鉴价值,下面来一起看看吧。
    2016-09-09
  • Angular+Ionic使用queryParams实现跳转页传值的方法

    Angular+Ionic使用queryParams实现跳转页传值的方法

    这篇文章主要介绍了Angular+Ionic使用queryParams实现跳转页传值的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • Angular开发实践之服务端渲染

    Angular开发实践之服务端渲染

    这篇文章主要介绍了Angular开发实践之服务端渲染,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论