javascript - ng-class 的这种(看似)意外行为背后的解释是什么？

Question

这是我创建的一个 plunker:http://plnkr.co/edit/ZoKsO7wu5OvCYtwEi9Iy?p=preview .

• 点击列表中使用 ng-repeat 渲染的项目之一，例如 a。
• 然后单击清除选择，这会在 AngularJS 之外使用 jQuery 清除选择。
• 现在，再次单击刚刚清除选择的同一项目，在本例中为 a

可以看出，现在无法选择a。但是，可以选择列表中的其他项目(b、c)。一旦选择了另一个项目并且清除了它的选择，就可以再次选择a!

为什么 ng-class 在这里表现异常？

Answer 1

我不会使用jQuery，但如果你仍然想要，那么你必须让Angular知道你所做的任何修改。

您可能认为您清除了选择，但 jQuery 回调所做的只是删除该类。从 Angular 的 Angular 来看，它仍然处于选中状态，因此它不会触发 ngClass watchExpression 来再次添加该类。

使用$scope.$apply():

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

这是一个骗子:http://plnkr.co/edit/C6jcmfU8V4tab8oeDJES?p=preview

我将您的点击事件监听器移至 Controller 中:

$('#removeSelection').click(function(){
  $scope.$apply(function(){
    $scope.selectedId = null;
  })
});

最好只使用 Angular 内置的 ngClick:

<a ng-click="selectedId = null">Click to Clear Selection</a>