ng-show expression ...如何调试

Question

我有以下代码

<span ng-show="form.email.$error.unique">Email already exists</span>

这可以正常工作，并且如果我们的数据库中已经存在在“电子邮件”输入字段中输入的电子邮件，我就能看到span元素。

但是，如果我进入chrome控制台。然后输入

form.email.$error

它说未定义。

我可以输入

form.email 

它告诉我

?<input name=?"email" ng-model=?"model.email" required class=?"ng-dirty ng-invalid ng-invalid-unique">

所以问题是为什么我在Chrome控制台中看不到$ error？该值肯定存在，因为angular正在读取它，并基于该值决定是否显示跨度。

编辑：：在进一步阅读文档后，我觉得检查电子邮件是否有效的指令...在控制器对象上设置了有效性（第四个参数。$ setValidity）

但UI会以某种方式从UI元素读取$ error。

因此，关于实际的工作流程，这是非常令人困惑的……在哪里设置了$ error以及从哪里读取了$ error。

有人可以澄清吗？

Answer 1

与在控制台中调试不同，一种有用的技术是仅在视图中输出变量：{{form.email.$error.unique}}。将其放在输入元素的上方或下方，并在您输入时观察该值的动态变化。

Answer 2

下载适用于 Chrome 的AngularJS Batarang插件。启用它后，您可以检查任何元素，并且控制台中将$scope显示所选元素的范围。
然后，您可以检查您提到的内容span并在控制台中输入$scope.form.email.$error.unique，您将获得它的当前值。

或者，如果您不想安装该插件（我更愿意安装它），您可以通过 javascript 获取当前范围，angular.element(document.getElementById(...)).scope() 然后检查该范围。
（当然，您可以通过其他方式获取元素，然后按document.getElementById(...))