AngularJS 在 innerHTML 编辑时中断答案

【问题标题】：AngularJS breaks on innerHTML editAngularJS 在 innerHTML 编辑时中断
【发布时间】：2016-07-29 13:37:24
【问题描述】：

我只是在摆弄时遇到了一个非常奇怪的问题。

我创建了一个日志功能，可以像这样将文本附加到document.body.innerHTML。

function log(text)
{
   document.body.innerHTML += text + '<br>';
}

如果我现在从我的控制器范围内调用这个函数，它会破坏 AngularJS。

有人能解释一下这种行为吗？

Demo - 多次单击栏，它们会触发。单击 foo 一次，所有单击事件都不再起作用

【问题讨论】：

因为您正在设置innerHTML，所以您实际上是在重新创建整个身体元素。控制器和指令链接到的元素被破坏，您的应用程序将中断。 document.body.innerHTML += 在任何情况下都是一个坏主意，尤其是在使用 Angular 时。
@Rhumborl 你能把它写成答案吗，因为这绝对是正确且解释清楚的答案？

【解决方案1】：

因为您正在设置innerHTML，所以您实际上是在重新创建整个<body> 元素。控制器和指令链接到的元素被破坏，您的应用程序将中断（就像任何普通的 JavaScript 事件处理程序一样）。

document.body.innerHTML += 在任何情况下都是一个坏主意，尤其是在使用 Angular 时。

如果您需要这样做，但无法通过标准 Angular 绑定等方式进行，更好的选择是angular.element(body).append()

【讨论】：

【解决方案2】：

您不能在控制器范围内引用 body 元素 .innerHTML！

【讨论】：

【解决方案3】：

“不要设计你的页面，然后用 DOM 操作来改变它” - Thinking in angularjs if I have a jquery background.

使用 Angular，您可以将事件绑定放在视图中，而无需在控制器中进行 DOM 操作。这是工作的Demo。

控制器

self.fooLog = [];

self.foo = function()
{
    self.fooLog.push("foo");
};

HTML

<div ng-repeat="foo in test.fooLog track by $index">
  {{foo}}
</div>

【讨论】：