-1

为什么对angular todo应用程序这样做会停止所有功能？

document.body.onload = function addElement() {
    document.body.innerHTML +=
        '<div  >'+
        '</div> ';
};

所有带有 ng-click 的按钮都不会调用它们各自的作用域函数，并且在输入上按 enter 会导致页面重新加载，而不是添加新的 todo 项。

演示提交：https ://github.com/QuantumInformation/todomvc/commit/95ca6233a3e5b3a9775675c3f92d731ecc6032af

4

1 回答 1

2

请记住，这个问题是指一个应该可以在任何网站上运行的实用程序，而不仅仅是一个 Angular 网站。如果你发现了这个问题并且正在构建一个 Angular 应用程序，那么这不适用于你。这是构建 AngularJS 应用程序之外的一个非常具体的用例。

我认为@epascarello 在评论中解释得很好，但重申一下：

您正在做的是获取页面上当前的 HTML 代码（其中不包括事件侦听器、$scope 绑定等）并重新渲染它的擦除版本，最后带有 a <div>。

如果您有一个带有以下模板的指令：

<div>
    <p>{{person.name}}</p>
</div>

当 Angular 在页面上显示它时，它通过将它绑定到一个$scope. 所以实际页面上的 HTML 将是：

<div>
    <p>Nikos</p>
</div>

AngularJS 将在更改时更新该元素person.name。发生这种情况的原因是 Angular 存储了对 DOM 元素的引用。不是字符串值，而是实际对象。但是，当您这样做时document.body.innerHTML = document.body.innerHTML += '<div></div>'，您将获取 HTML 并创建它的副本。现在，AngularJS 引用的 DOM 元素不存在。页面上显示了一个新版本，但 AngularJS 不知道它。

正确的方法是：

document.body.appendChild(document.createElement('div'));
于 2015-07-27T20:23:31.110 回答