AngularJS ng-class 表达式未正确更新答案

【问题标题】：AngularJS ng-class Expression Not Updating ProperlyAngularJS ng-class 表达式未正确更新
【发布时间】：2015-10-12 19:57:34
【问题描述】：

所以我正在尝试为文本输入构建一个自定义的自动完成下拉菜单。为此，我正在监听 keydown 事件，如果它是向上或向下箭头按下，我将 $scope.arrowSelectedItem 变量设置为列表中的正确变量。（作为旁注，所有功能都可以从弹出的列表中选择一个项目。我要做的就是突出显示他们用上/下箭头标记的当前项目）。

在标记方面，自动完成列表中的项目以ng-repeat 和ng-repeat="item in itemList" 输出。我使用的ng-class 表达式是ng-class="{highlighted: item === arrowSelectedItem}"。我知道 $scope.arrowSelectedItem 正在使用 console.log 在每次按下箭头时更新，但由于某种原因，该类没有正确更新到列表项。

我发现在第一次按箭头键后，如果我让文本输入框失去焦点，则添加类。然后如果我在框中单击返回，移动箭头以选择不同的项目，单击输入框，然后单击返回，该类被添加到新的。我知道这听起来很奇怪，但这就是我发现的。

我不确定的是为什么 ng-class 表达式没有在每次按下箭头键时都被评估。有谁知道为什么？

【问题讨论】：

在诊断这些事情时，书面描述永远不能替代实际代码。在我看来，您可能正在侦听 Angular 的 $digest 循环之外的按键，而不是在您的事件处理程序中通知它的框架，例如通过调用 $scope.$apply()。如果您发布一些代码，很高兴再看看
@JamesHenry 对此感到抱歉。 Here's a gist 带有适用的代码。
@JamesHenry 感谢您的建议。原来是答案。我只需要在我的 keyHandler 函数末尾添加$scope.$apply()。再次感谢您的帮助！
太好了，如果您不介意，我会将其作为正确答案粘贴，您可以接受它，以便其他人在发现此帖子时受益。

标签： angularjs ng-class

【解决方案1】：

这里的答案是，在 Angular 的内置指令之一之外触发的“原始”DOM 事件（例如通过 ng-click 等的点击事件）不会触发 $digest 循环更新。在此之前，$scope 属性不会被更新。

如果您正在使用另一个框架或仅使用 addEventListener() 监听 DOM 事件，则需要使用 $scope.$apply() 或通过将代码包装在 $timeout() 中。

如果您在事件处理程序中执行此操作，Angular 将为每次按键触发新的 $digest 循环更新，并且您的新范围值将传播到视图。

【讨论】：