AngularJS breaks on innerHTML edit

Я просто натолкнулся на действительно любопытную проблему во время игры.AngularJS breaks on innerHTML edit

Я создал функцию каротажа, которая добавляет текст в document.body.innerHTML вот так.

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

Если я сейчас позвоню этому функционалу из области моего контроллера, он разломит AngularJS.

Не могли бы вы объяснить это поведение?

Demo - нажмите несколько раз подряд, они стреляют. нажмите foo один раз, ни один из событий кликов больше не работает

источник

2016-04-08 Aides

Поскольку вы устанавливаете 'innerHTML', вы фактически воссоздавать весь элемент тела. Элементы, с которыми связаны контроллеры и директивы, уничтожаются, и ваше приложение будет ломаться. 'document.body.innerHTML + =' - плохая идея в любом сценарии, но особенно при использовании углового. – Rhumborl

@Rhumborl вы могли бы написать это как ответ, так как это определенно правильный и хорошо объясненный ответ? – Aides

Поскольку вы устанавливаете innerHTML, вы фактически воссоздавать весь <body> элемент. Элементы, с которыми связаны контроллеры и директивы, уничтожаются, и ваше приложение будет разбиваться (как и любые обработчики событий ванильного JavaScript).

document.body.innerHTML += - плохая идея в любом сценарии, но особенно при использовании Углового.

Если вам нужно сделать это, и не можете сделать это через стандартный Угловое связывание и т.д., лучший вариант был бы angular.element(body).append()

источник

2016-06-16 14:19:55 Rhumborl

вы не можете ссылаться на элемент кузова .innerHTML внутри области управления!

источник

2016-04-08 10:19:47

«Не создавайте страницу, а затем меняйте ее с помощью DOM-манипуляций» - Thinking in angularjs if I have a jquery background.

С угловым вы помещаете привязку к событиям в представление и не выполняете манипуляции с DOM в контроллерах. Вот работающий Demo.

контроллер

self.fooLog = []; 

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

HTML

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

источник

2016-04-08 11:01:31

Спасибо за решение, дело в том, что я хотел получить техническое объяснение, почему это происходит (я развивался в Angular в течение нескольких лет и просто наткнулся на это при прототипировании чего-то) – Aides

AngularJS breaks on innerHTML edit

ответ

Смежные вопросы