使用jQuery更新复选框时，AngularJS不会刷新

Question

我有一个使用AngularJS的HTML页面。

这基本上是一个列表，可以通过点击一些复选框进行过滤。

我想使用jQuery‘大蒜’插件来记住复选框状态。

插件运行良好，只是AngularJS"看不到"复选框状态：列表没有根据复选框状态进行过滤。即使不使用"大蒜"，我也有同样的问题，如果我做这样的事情：

$(document).ready(function() {
$('#my-checkbox-tracked-by-angular).attr('checked',true_or_false).change();
});

复选框本身会进行可视化更新，但AngularJS不会被触发。

触发AngularJS的唯一方法是使用点击事件：

$(document).ready(function() {
$('#my-checkbox-tracked-by-angular).trigger("click");
});

AngularJS正在更新列表，但点击事件也将复选框切换到相反的状态，我不希望这样。

当角度跟踪复选框在Angular外部更新时，有没有方法告诉Angular刷新？

注：我也试过：

$scope.$apply();

但是$scope是未定义的，尽管我的代码是在角度加载之后。我有AngularJS V1.2.1。如何访问$scope？

Answer 1

有没有一种方法可以告诉Angular在跟踪角度时刷新复选框是否在角度之外更新？

是的，有一种叫做"脏检查"的东西可以帮助您实现这一点(请参阅范围文档(。

为了告诉AngularJS进行脏检查，您可以执行$scope.$apply();。类似于：

$(document).ready(function() {
$('#my-checkbox-tracked-by-angular').attr('checked',true_or_false).change();
// do dirty checking!
// wrap it inside $timeout in order to avoid Action Already In Progress
// you can laverage this in your app. Maybe it's not necessary,
// but that depends on your entire app architecture and interaction
// between all angularjs elements (controllers, directives, etc)
$timeout(function() {
$scope.$apply();
});
});

如果由于任何原因无法执行此操作，则可以使用作为变通方法来触发click事件两次。这不是最好的解决方案，当然也不是最干净的，但它会起作用。类似于：

$(document).ready(function() {
$('#my-checkbox-tracked-by-angular).trigger("click").trigger("click");
});

注意：

如果您直接将AngularJS和jQuery混合用于DOM操作，请谨慎操作，它可能会变得一团糟。为了获得更多关于原因的背景知识，请阅读"；AngularJS中的思考；如果我有jQuery背景？。

其他读数：

• $rootScope.Scope#$apply
• 行动已在进行中
• $timeout