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。

赞 (0)

相关推荐

  • AngularJs $parse、$eval和$observe、$watch详解

    $parse和$eval $parse和$eval这两个函数都可以解析表达式的值. 它们的区别在于$parse是一个服务, 可以注入使用. $eval是scope对象上的一个方法, 我们只能在能访问scope的场景下使用它. var getter = $parse('user.name'); var setter = getter.assign; var context = {user: {name: 'John Doe'}; var locals = {user: {name: 'Doe Jo

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

    AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑,今天我们就来说说AngularJS中的$parse和$eval. 总的来说,$parse和$eval都是作用于AngularJS的表达式. 什么是表达式? AngularJS中的表达式就是一些类似于JavaScript代码的代码片段(但是它们和JavaScript代码有不尽相同).表达式通常被用来防止在绑定中,例如{{expression}}.下面是一个例子: 1 + 2 = {{ 1 + 2 }} 或者: My

  • AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值

    在"AngularJS中自定义有关一个表格的Directive"中自定义了一个有关表格的Direcitve,其表格的表现方式是这样的: <table-helper datasource="customers" clumnmap="[{name: 'Name'}, {street: 'Street'}, {age: 'Age'}, {url: 'URL', hidden: true}]"></table-helper> 以上

  • angularjs中的$eval方法详解

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值 想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

  • javascript中JSON.parse()与eval()解析json的区别

    javascript中JSON.parse()与eval()解析json的区别

    本文实例讲述了javascript中JSON.parse()与eval()解析json的区别.分享给大家供大家参考,具体如下: JSON(JavaScript Object Notation)是一种轻量级的数据格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是Javascript原生格式,这意味着在javascript中处理JSON数据 基本格式: varjsonData='{"data1":"Hello,","data2"

  • 详解AngularJs中$sce与$sceDelegate上下文转义服务

    一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct

  • Angularjs手动解析表达式（$parse）

    下面一段代码给大家介绍了angularjs手动解析表达式($parse),具体代码如下所示: <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <meta charset="utf-8"> <title>手动解析表达式($parse)</title> <link rel="stylesheet&qu

  • 如何在AngularJs中调用第三方插件库

    在AngularJs中我们会不可避免的使用第三方库,例如jquery插件库.我们不能散乱的在AngularJS中引入这些库,例如在controller中.那么应该怎么在Angular中使用第三方库呢? 如何使用? 很简单,给插件写一个directive. 在这里,我会使用一个简单的jquery插件Toolbar.js 的DEMO. 这是我们如何在jquery中创建一个tooltip的: <!-- Click this to see a toolbar --> <div id="

  • 深究AngularJS中ng-drag、ng-drop的用法

    1.相关地址: 插件下载:https://github.com/fatlinesofcode/ngDraggable/blob/master/ngDraggable.js 2.讲解 <div ng-drop="true" ng-drop-success="dropComplete($index,$data,$event)" ng-repeat="item in content"> <li ng-drag="true&q

  • angularJS 中$scope方法使用指南

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

随机推荐