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

Question

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

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

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

我不确定的是为什么ng-class表达式没有在每个箭头按键上进行评估.有没有人有任何想法？

Answer 1

这里的答案是,在一个angular的内置指令之外触发的"原始"DOM事件(例如通过ng-click等点击事件)不会触发$ digest循环更新.在此之前,$ scope属性将不会更新.

如果您正处于使用其他框架侦听DOM事件的位置,或者只是使用addEventListener(),则需要通过使用$ scope.$ apply()或通过包装代码让角度知道任何更改.在$ timeout()中.

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