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

创建自定义指令：

scripts

然后在元素上声明该指令：

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

当AngularJS编译服务将元素添加到DOM时，它将自动调用<div id="switch" add-reach-click> </div>函数。

有关更多信息，请参见AngularJS Developer Guide - Creating Custom Directives。

角载荷后的载荷扩展

1 个答案: