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

Posted 2021-03-26

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

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

我想用jQuery'garlic'插件记住复选框状态。

该插件运行良好，除了AngularJS“没有看到”复选框状态：列表未根据复选框状态进行过滤。即使不使用'大蒜'，我也有同样的问题，我会做这样的事情：

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

复选框本身在视觉上更新，但不会触发AngularJS。

唯一可以触发AngularJS的是使用click事件：

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

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

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

注意：我也尝试过：

$scope.$apply();

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

答案

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

是的，有一种叫做“脏检查”的东西可以帮助你实现这一目标（参见scope docs）。

为了告诉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操作，那么请小心谨慎，它可能会变得一团糟。为了获得更多关于原因的背景，请阅读"Thinking in AngularJS" if I have a jQuery background?。

附加读物：

• $rootScope.Scope#$apply
• Action Already In Progress
• $timeout