javascript - 我根本不了解 Angular 数据绑定(bind)

Question

我花了几个小时尝试对这段代码进行微小的修改，但我不明白为什么一个可以工作而另一个不能。

场景如下:我正在尝试提供一个注册用户列表(我通过一个简单的数据库查询获得了该列表，该查询只返回几列)，然后当一个用户的名字被点击时，我将检索从数据库中获取有关该用户的更多信息，并将其呈现在不同的 View 中。目前，我正在使用常规 <a> 执行此操作带有 ng-click 的元素设置一个名为 currentid 的值的指令.在我的代码的其他地方，我使用 $watch()每当 currentid 时发送一个新的数据库查询变化。那部分似乎在工作(我看到 console.log() 从我的 watch 回调中输出，并且数据库查询吐出正确的数据)......但有时 currentid变化，有时却没有，我不明白为什么。

• 一个不起作用的 jsfiddle:http://jsfiddle.net/aLcRL/11/
• 一个有效的 jsfiddle:http://jsfiddle.net/aLcRL/12/

(单击表中的“rmunn”和“admin”链接:下面的“Currrent ID”值应该会更新。请原谅几乎完全缺少 CSS；我是编码员，而不是图形设计师( “该死，吉姆!”)，现在在我的时区也很晚了，所以我没有动力去美化它。它是功能性的，它展示了问题，我打算就此打住。)

这两者之间的唯一区别是一个绑定(bind)到 currentid , 另一个绑定(bind)到 vars.currentid .现在，我明白为什么要绑定(bind)到 currentid在父级和子级范围的情况下不起作用(子级的值会掩盖父级的值)；因为我来自 Python 背景，所以这对我来说很有意义(这类似于 Python 的实例 namespace 如何隐藏类上定义的任何 namespace )。但是在这个 jsfiddle 中，我只使用了一个 Controller ——所有这些变量不都在同一个范围内吗？

我一整天都在为此苦苦思索，而我尝试阅读的几个 Stack Overflow 答案(例如 How does data binding work in AngularJS?)让我更加困惑:$apply()和 $digest()和示波器，天哪!因此，如果有人能给我一份关于 Angular 中作用域的简单好用的初学者指南(或者指出我错过的已经编写好的指南)，我将不胜感激。

“我学过 Clojure 和 Haskell，我可以学一个简单的 Javascript 框架，”我想。 “这很容易。”男孩，我错了。 :-)

Answer 1

您遇到了 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>

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