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

Question

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

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

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

该插件运行良好，除了 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 之外更新时，有没有办法告诉 Angular 刷新？

注意:我也尝试过:

$scope.$apply();

但是 $scope 未定义，尽管我的代码是在 Angular 加载之后。 我有 AngularJS V1.2.1。我怎样才能访问 $scope ？

Answer 1

Is there a way to tell Angular to refresh when a angular-tracked checkbox is updated outside 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