首页 > 语言 > JavaScript > 正文

基于angular中的重要指令详解($eval,$parse和$compile)

2024-05-06 15:08:05
字体:
来源:转载
供稿:网友

在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile。其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解。

大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了  

$eval: function(expr, locals) {    return $parse(expr)(this, locals);   },

相信看完源码大家就明白了吧,好了,现在就开始两种核心服务的讲解了,如果感觉我说的不对的话,欢迎在评论区或者私聊指出,免得祸害其他读者。

再讲这两个服务的时候,我要先讲一个在本贴的概念:上下文

我相信,很多人都听过这个“上下文”,但是可能有点模糊,在我这里给大家解释解释看看大家接不接受这个说法。

还记得angular的数据绑定吗?比如:我现在有个有个叫TestCtrl的控制器,他的内容如下:

.controller('TestCtrl', function($scope) {      $scope.test = "Boo!!!"  })

而在html中我们的代码是这样的

<body ng-controller="TestCtrl">  {{test}}</body>

那么,大家不用想都知道结果了,页面上肯定会显示 Boo!!!的字样。

但是如果我删掉ng-controller的指令呢?也就是我没有在html申明控制器,你直接绑定{{test}}会如何呢?

结果只有一个,那就是页面啥都没有(ps:因为你申明了ng-app)。讲到这里大家明白了吗?

控制器就相当于一个上下文的容器,真正的上下文其实是$scope,当页面绑定test,如果申明了控制器,当前上下文就是控制器里面的$scope,ng会去找一下你这个控制器的上下文$scope有没有test,如果有,他当然就显示出来了,但是你不申明控制器的时候呢?他的上下文容器就是ng-app了,那么他真正的上下文就是$rootScope,这个时候他就会寻找$rootScope有没有test。

好了,上下文的概念已经讲完了,其实挺容易理解的,基本上和this非常相似

那么言归正传,我们开始讲$parse,首先我们要看的是ng的API文档

var getter = $parse('user.name');var setter = getter.assign;var context = {user:{name:'angular'}};var locals = {user:{name:'local'}};expect(getter(context)).toEqual('angular');setter(context, 'newValue');expect(context.user.name).toEqual('newValue');expect(getter(context, locals)).toEqual('local');

大家看到的是ng文档里面对于$parse服务性价比最高的几行代码,

getter和setter就是大家所熟知的get方法和set方法了,context和locals仅仅是json对象而已,目的就是模拟上下文关系

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选