Расширение нагрузки после угловых нагрузок

Question

Я пишу расширение Chrome, которое добавляет прослушиватели событий к элементам на странице, использующей Angular 1.2.10, с кодом, подобным следующему:

window.addEventListener("load", (event) => {
var switchButton = document.getElementById('switch');
  switchButton.addEventListener('click', (event) => {
    reached = !reached;
  });
});

Работает нормально, но если я начнузагрузить страницу и переключить вкладки, я получаю сообщение об ошибке Uncaught TypeError: Cannot read property 'addEventListener' of null.Похоже, что приложение Angular загружается не полностью, пока я не вернусь на исходную вкладку, но событие load срабатывает в любом случае.

Как я могу ждать, пока приложение Angular не заполнит DOM, чтобы добавить мой прослушиватель щелчков к элементу 'switch'?

Спасибо за любую помощь!

Answer 1

Создайте пользовательскую директиву:

app.directive("addReachClick", function () {
    return {
        link: postLink
    };
    function postLink(scope,elem,attrs) {
        elem.on('click', (event) => {
          reached = !reached;
        });
    }
})

Затем объявите эту директиву для элемента:

<div id="switch" add-reach-click>
</div>

Служба компиляции AngularJS автоматически вызовет функцию postLink при добавлении элементав DOM.

Подробнее см. AngularJS Developer Guide - Создание пользовательских директив .