javascript - 当使用 jquery 属性选中复选框时，Angular ng-model 不会更新

Question

该代码尝试通过 jquery .prop 函数设置已检查的属性。但 ng-model 仍然是空白。

$('document').ready(function(){
    $("#mybutton").on('click',function(){
        $("#mycheckbox").prop('checked',true);
    });
});

<input type="button" id="mybutton" value="click">
<input type="checkbox" id="mycheckbox" name="one" ng-model="arr[1]" value="1" />

{{arr}}   -- is blank when checked with jquery and not blank when manually checked.

当我手动检查复选框时，ng-model 被绑定(bind)并设置其值。您能帮助一下如何在使用 jQuery 选中复选框时更新 ng-model 吗？

Answer 1

当 Angular 重新检查 ng model 和 when digest runs 等绑定(bind)属性时，您应该阅读.

使用 $scope.$applyAsync() 方法包装您的函数，如下所示:

   $scope.$applyAsync($("#mycheckbox").prop('checked',true));

这应该在 Controller 内部完成。

如果您不想在无范围路径中执行任何操作，可以使用 $timeout。

再一次。所有 dom 操作都应在指令/组件内完成，您可以在其中访问 applyAsync 等各种 Angular 工具。