当JavaScript中的checked属性设置为true时，复选框未在UI中显示为选中状态

Question

我在ng-repeat生成的表中有一些复选框。

复选框的定义如下：

<input type="checkbox" id="chkView{{::myObj.TeamId}}" 
    ng-disabled="disableView(myObj)" 
    ng-click="setViewSelection(myObj.TeamId, this.checked)">

复选框没有ng-model属性，这是有意的。 我想直接通过javascript控制每个复选框的checked状态。

由于某些原因，该复选框不响应在JavaScript中被更新的checked属性。 因此，如果我在javascript中有此声明：

document.getElementById('chkView27').checked = true;`

它会以编程方式工作，我可以

console.log(document.getElementById('chkView27').checked);

它将true打印到控制台。 但是浏览器中的UI不能反映这一点。 在浏览器中，该复选框保持未选中状态。 我已经验证了事实之后，没有其他因素影响复选框的checked属性。 用户界面只是不更新​​。 为什么是这样？

编辑：根据prasad的建议，我尝试将语句包装在$scope.$apply如下所示：

$scope.$apply(function() {
    document.getElementById('chkView27').checked = 'checked';
});

但是，这只会导致angular抛出“动作已进行中”错误。

https://docs.angularjs.org/error/ $ rootScope / inprog？p0 = $ digest

Answer 1

同样将checked属性设置为字符串“ checked”：

document.getElementById('chkView27').checked = 'checked';

Answer 2

用javascript完成的DOM操作不会直接影响DOM，因为它对角度来说是未知的。 如果直接在控制器中执行此操作，则它将起作用。 但是，如果您使用普通的javascript进行操作，则需要使用$ apply来使angular知道您已在DOM中进行了更改，然后angular将为您更新该内容。