AngularJS breaks on innerHTML edit

2019-09-15 19:09发布

站内问答 / JavaScript
1457 3 6

I just came across a really curious issue while fiddling around.

I have created a logging function which appends the text to document.body.innerHTML like this.

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

If I now call this funciton from my controller scope it breaks AngularJS.

Could someone explain this behaviour?

Demo - click bar multiple times, they fire. click foo once, none of the click events work anymore

3条回答
兄弟一词,经得起流年.
2楼-- · 2019-09-15 19:27

you can't refer the body element .innerHTML inside the controller scope !

查看更多
0人赞 添加讨论(0) 举报
冷血范
3楼-- · 2019-09-15 19:31

Because you are setting the innerHTML, you are effectively recreating the whole <body> element. The elements the controllers and directives are linked to are destroyed and your application will break (as will any vanilla JavaScript event handlers).

document.body.innerHTML += is a bad idea in any scenario, but especially when using Angular.

If you need to do this, and cannot do it through standard Angular binding etc, a better option would be angular.element(body).append()

查看更多
0人赞 添加讨论(0) 举报
何必那么认真
4楼-- · 2019-09-15 19:53

"Don't design your page, and then change it with DOM manipulations" - Thinking in angularjs if I have a jquery background.

With angular, you put your event-binding in the view and don't do DOM manipulation in controllers. Here's the working Demo.

controller

self.fooLog = [];

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

HTML

<div ng-repeat="foo in test.fooLog track by $index">
  {{foo}}
</div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)