我根本不懂Angular的数据绑定

I don't understand Angular data binding at all

本文关键字：数据绑定 Angular 不懂      更新时间：2023-09-26

我花了几个小时尝试这段代码的一些小变化，我不明白为什么一个可以工作而另一个不能。

下面是这样一个场景:我正在尝试呈现一个注册用户列表(我通过一个只返回几列的简单数据库查询获得)，然后当单击一个用户的名字时，我将从数据库中检索关于该用户的更多信息，并在不同的视图中呈现它。目前，我正在使用具有ng-click指令的常规<a>元素进行此操作，该指令设置了一个称为currentid的值。在我的代码的其他地方，我使用$watch()在currentid更改时发出一个新的数据库查询。这部分似乎正在工作(我看到我的手表回调的console.log()输出，数据库查询正在吐出正确的数据)…但有时currentid会改变，有时不会，我不知道为什么。

  • 一个不工作的jsfiddle: http://jsfiddle.net/aLcRL/11/
  • 一个可以工作的jsfiddle: http://jsfiddle.net/aLcRL/12/

(点击表中的"rmunn"answers"admin"链接:下面的"当前ID"值将更新。请原谅几乎完全没有CSS;我是一名程序员，而不是一名图像设计师("该死的，吉姆!")，而且现在在我的时区已经很晚了，所以我没有动力去美化它。它是功能性的，它演示了问题，我将把它放在这里。)

两者之间的唯一区别是一个绑定到currentid，另一个绑定到vars.currentid。现在，我明白了为什么绑定到currentid在父级和子级作用域的情况下不起作用(子级的值会掩盖父级的值);因为我有Python背景，所以这对我来说是有意义的(这类似于Python的实例名称空间可以遮蔽类上定义的任何名称空间)。但在这个示例中，我只使用了一个控制器——所有这些变量不都在同一个作用域中吗?

我一整天都在为这个问题绞尽脑汁，我试着去读了几个Stack Overflow的答案(比如AngularJS中的数据绑定是如何工作的?例如)让我更加困惑:$apply()和$digest()和作用域，天哪!因此，如果有人能给我一个简单的Angular作用域入门指南(或者给我指出一个我错过的已经写好的指南)，我将非常感激。

"我已经学会了Clojure和Haskell，我可以学习一个简单的Javascript框架，"我想。"这很容易。"天啊，我错了。: -)

您遇到了ng-repeat创建子作用域的问题。

<tr ng-repeat="user in data" blarg="{{user.id}}">
    <!-- currentid here is part of the ng-repeat child scope 
     and not your root scope -->
    <td><a href="#{{user.id}}" ng-click="currentid = user.id">{{user.userName}}</a></td>
    <td>{{user.email}}</td>
</tr>

如果需要访问父作用域，可以使用$parent.currentid 

<a href="#{{user.id}}" ng-click="$parent.currentid = user.id">{{user.userName}}</a>

你需要使用$apply()每当你修改一个值以外的角度世界。例如使用setTimeout()或jQuery插件。调用$apply()会提醒Angular重新评估scope，看看是否有任何变化，并进行相应的更新。

相关文章：