AngularJS入门教程之数据绑定原理详解资源-CSDN文库

84 浏览量 2020-11-29 15:06:02 上传评论收藏 103KB PDF 举报

资源推荐

资源详情

资源评论

AngularJS入门教程之数据绑定原理详解入门教程之数据绑定原理详解

本文实例讲述了AngularJS数据绑定原理。分享给大家供大家参考，具体如下：

注注

这篇文章主要是写给新手的，是给那些刚刚开始接触Angular，并且想了解数据帮定是如何工作的人。如果你已经对Angular比

较了解了，那强烈建议你直接去阅读源代码。

Angular用户都想知道数据绑定是怎么实现的。你可能会看到各种各样的词汇：$watch,$apply,$digest,dirty-checking…它们是

什么？它们是如何工作的呢？这里我想回答这些问题，其实它们在官方的文档里都已经回答了，但是我还是想把它们结合在一

起来讲，但是我只是用一种简单的方法来讲解，如果要想了解技术细节，查看源代码。

让我们从头开始吧。

浏览器事件循环和浏览器事件循环和Angular.js扩展扩展

我们的浏览器一直在等待事件，比如用户交互。假如你点击一个按钮或者在输入框里输入东西，事件的回调函数就会在

JavaScript解释器里执行，然后你就可以做任何DOM操作，等回调函数执行完毕时，浏览器就会相应地对DOM做出变化。

Angular拓展了这个事件循环，生成一个有时成为angular context的执行环境（记住，这是个重要的概念），为了解释什么是

context以及它如何工作，我们还需要解释更多的概念。

$watch 队列（队列（$watch list））

每次你绑定一些东西到你的UI上时你就会往$watch队列里插入一条$watch。想象一下$watch就是那个可以检测它监视的

model里时候有变化的东西。例如你有如下的代码

index.html

User: <input type="text" ng-model="user" />

Password: <input type="password" ng-model="pass" />

在这里我们有个$scope.user，他被绑定在了第一个输入框上，还有个$scope.pass，它被绑定在了第二个输入框上，然后我

们在$watch list里面加入两个$watch

接着看下面的例子：

controllers.js

app.controller('MainCtrl', function($scope) {

$scope.foo = "Foo";

$scope.world = "World";

});

index.html

Hello, {{ World }}

这里，即便我们在$scope上添加了两个东西，但是只有一个绑定在了UI上，因此在这里只生成了一个$watch.

再看下面的例子：

controllers.js

app.controller('MainCtrl', function($scope) {

$scope.people = [...];

});

index.html

<ul>

<li ng-repeat="person in people">

{{person.name}} - {{person.age}}

</li>

</ul>

这里又生成了多少个$watch呢？每个person有两个（一个name，一个age），然后ng-repeat又有一个，因此10个person一共

是(2 * 10) +1,也就是说有21个$watch。因此，每一个绑定到了UI上的数据都会生成一个$watch。对，那这写$watch是什么时

候生成的呢？当我们的模版加载完毕时，也就是在linking阶段（Angular分为compile阶段和linking阶段—译者注），Angular

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余4页未读，立即下载

内容反馈

weixin_38715772

粉丝: 4
资源: 926

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip