Angular中通过浏览器控制台JS修改元素后如何触发DOM刷新

直接通过原生JS修改复选框checked属性不生效的核心原因是：AngularJS（1.x版本）的双向绑定依赖自身的事件监听机制触发digest变更检测循环，原生DOM操作绕过了Angular的事件监听，框架感知不到数据变化，自然不会执行绑定的筛选逻辑。

方法1：修改DOM后手动触发change事件（优先使用，最简便） #

AngularJS的ng-model指令默认会监听表单元素的change/input事件同步绑定值，你只需要在修改复选框状态后，手动给元素派发冒泡的change事件，就能让Angular捕获到变更，自动执行后续逻辑。
替换原来的控制台代码为以下内容即可：

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type === 'checkbox' && inputs[i].checked) {
    inputs[i].checked = false;
    // 派发冒泡的change事件，触发Angular的监听逻辑
    inputs[i].dispatchEvent(new Event('change', { bubbles: true }));
  }
}

这个方法不需要调用Angular全局API，适配绝大多数AngularJS站点的表单场景。

方法2：手动获取作用域触发$apply（方法1无效时使用） #

如果站点对复选框做了自定义事件封装，触发change事件没有生效，可以直接获取Angular作用域，手动触发变更检测循环：

// 先执行复选框取消勾选逻辑
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  if (inputs[i].type === 'checkbox') {
    inputs[i].checked = false;
  }
}

// 获取Angular作用域，优先取复选框自身的作用域，避免全局作用域不生效
var targetEl = document.querySelector('input[type="checkbox"]') || document.querySelector('.ng-scope');
var scope = angular.element(targetEl).scope();

// 触发变更检测，$$phase判断避免在已执行的digest周期里调用报错
if (!scope.$$phase) {
  scope.$apply();
}

注意：如果站点做了angular全局变量的混淆隔离，这个方法可能无法使用，优先选择方法1。

内容的提问来源于stack exchange，提问作者Sarthak Kuchhal