我完全不理解Angular数据绑定
我花了好几个小时来尝试这些代码的细微变化,我不明白为什么一个工作,另一个不工作。
这里是一个场景:我试图提供一个注册用户列表(我用一个简单的数据库查询返回的只是几列),然后当一个用户的名字被点击时,我会检索更多关于来自数据库的该用户,并将其呈现在不同的视图中。 目前,我正在使用常规的<a>
元素和ng-click
指令设置一个名为currentid
的值。 在我的代码中,我使用$watch()
发送一个新的数据库查询,只要currentid
更改。 这部分似乎正在工作(我看到我的手表回调console.log()
输出,数据库查询吐出正确的数据)...但有时currentid
更改,有时它不,我不能找出原因。
(点击表中的“rmunn”和“admin”链接:下面的“Currrent ID”值应该更新,请原谅几乎完全缺乏CSS;我是一名编码人员,而不是图形设计人员(“Dammit,吉姆!“),现在我的时区也很晚,所以我没有动力去做这件事,它很实用,它证明了这个问题,并且我将要离开它。)
这两者之间的唯一区别在于一方面与currentid
绑定, vars.currentid
与vars.currentid
绑定。 现在,我明白为什么绑定到currentid
不适用于父母和孩子的范围(孩子的价值会掩盖父母的价值); 因为我来自Python背景,这对我来说很有意义(它类似于Python的实例命名空间如何影响类中定义的任何命名空间)。 但在这个jsfiddle中,我只使用一个控制器 - 并不是所有这些变量都在同一个范围内?
我一整天都在对付这个问题,而我尝试阅读的几个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
以查看是否有任何更改并相应地更新。