Scope in AngularJS

来源:http://www.sh-fengwen.com 作者: 营养排行 人气:139 发布时间:2019-09-03
摘要:Angular是一个成熟和强大的JavaScript框架。它也是一个比较庞大的框架,在熟练掌握之前,需要领会它提出的很多新概念。很多Web开发人员涌向Angular,有不少人面临同样的障碍。Digest到底

Angular是一个成熟和强大的JavaScript框架。它也是一个比较庞大的框架,在熟练掌握之前,需要领会它提出的很多新概念。很多Web 开发人员涌向Angular,有不少人面临同样的障碍。Digest到底是怎么做的?定义一个指令directive)有哪些不同的方 法?Service和provider有什么区别?

From RUNBOOM.COM

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带。

Scope 是一个对象,有可用的方法和属性。

Scope 可应用在视图和控制器上。

While, how many scopes can we have? is there any structure in it? I got those question when I come to it.

After a tough time reading, I think I have mixed up it with scope in java or python or whatever.

To be simple, it is a way to pass values from controllers to view(HTML), and nothing with structure.

I have to admit that here is a simple structure from root scope to scope, while, here, we'd better ignore it as it has no contribution to our understanding of scope in Angularjs.

Angular的文档挺不错的,第三方的资源也越来越丰富,想要学习一门新的技术,没什么方法比把它拆开研究其运作机制更好。

在这个系列的文章中,我将从无到有构建AngularJS的一个实现。随着逐步深入的讲解,读者将能对Angular的运作机制有一个深入的认识。

在第一部分中,读者将看到Angular的作用域是如何运作的,还有比如$eval, $digest, $apply这些东西怎么实现。Angular的脏检查逻辑看上去有些不可思议,但你将看到实际并非如此。

基础知识

在Github上,可以看到这个项目的全部源码。相比只复制一份下来,我更建议读者从无到有构建自己的实现,从不同角度探索代码的每个步骤。在本文 中,我嵌入了JSBin的一些代码,可以直接在文章中进行一些互动。译者注:因为我在github上翻译,没法集成JSBin了,只能给链接……)

我们将使用Lo-Dash库来处理一些在数组和对象上的底层操作。Angular自身并未使用Lo-Dash,但是从我们的目的看,要尽量无视这些不太相关的比较底层的事情。当读者在代码中看到下划线_)的时候,那就是在调用Lo-Dash的功能。

我们还将使用console.assert函数做一些特别的测试。这个函数应该适用于所有现代JavaScript环境。

下面是使用Lo-Dash和assert函数的示例:

Scope对象

Angular的Scope对象是POJO简单的JavaScript对象),在它们上面,可以像对其他对象一样添加属性。Scope对象是用构造函数创建的,我们来写个最简单的版本:

function Scope() { } 

现在我们就可以使用new操作符来创建一个Scope对象了。我们也可以在它上面附加一些属性:

var aScope = new Scope(); aScope.firstName = 'Jane'; aScope.lastName = 'Smith'; 

这些属性没什么特别的。不需要调用特别的设置器setter),赋值的时候也没什么限制。相反,在两个特别的函数:$watch和$digest之中发生了一些奇妙的事情。

监控对象属性:$watch和$digest

$watch和$digest是相辅相成的。两者一起,构成了Angular作用域的核心:数据变化的响应。

本文由美高梅游戏平台网站发布于 营养排行,转载请注明出处:Scope in AngularJS

关键词:

上一篇:JQuery的$命名冲突详细解析

下一篇:没有了

频道精选

最火资讯