當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將為您更新該內容。