Ensure that the extension is only loaded once Angular has fully loaded

Question

Ensure that the extension is only loaded once Angular has fully loaded

I am currently working on a Chrome extension that incorporates event listeners to elements within a page utilizing Angular 1.2.10. The following code snippet is an example of what I have:

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

Although everything runs smoothly under normal circumstances, an error

Uncaught TypeError: Cannot read property 'addEventListener' of null

occurs if the page is loaded and tab is switched. It seems like the Angular application does not finish loading until switching back to the original tab, even though the load event still triggers.

Is there a way for me to delay the addition of the click listener to the 'switch' element until after the Angular app has completed populating the DOM?

Your assistance is greatly appreciated!

javascript angularjs

Answer 1

Answer №1

Develop a unique directive:

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

Next, apply that directive on the specific element:

<div id="toggle" handle-click-event>
</div>

The AngularJS compile service will automatically trigger the handleEvent function when it inserts the element into the DOM.

To gain further insights, visit AngularJS Developer Guide - Crafting Unique Directives.

Answer 2

Develop a unique directive:

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

Next, apply that directive on the specific element:

<div id="toggle" handle-click-event>
</div>

The AngularJS compile service will automatically trigger the handleEvent function when it inserts the element into the DOM.

To gain further insights, visit AngularJS Developer Guide - Crafting Unique Directives.

Ensure that the extension is only loaded once Angular has fully loaded

Answer №1

Similar questions

steps for transferring a shallow copy of an array to a function

Determine if a key begins with a specific string within an object and retrieve the corresponding value

What is the reason behind JSLint's preference for x === "undefined" over typeof x == "undefined"?

Find your favorite artist on Spotify through the search function

Adjust the size of a Div/Element in real-time using a randomly calculated number

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Error encountered: [$rootScope:inprog] TriggerHandler causing issue with $apply - AngularJS

Expiration Date of Third-Party Cookies

How to retrieve an object's property within a component

jquery to create a fading effect for individual list items

React component fails to re-render after state change

Having trouble importing Material UI and working with ClickAwayListener

Error occurs when using Express.js in combination with linting

Error in JavaScript: A surprise anonymous System.register call occurred

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

jQuery for Revealing or Concealing Combinations of Divs

Anguar server encountered a startup issue and failed to initialize

Implementing a custom body class in AngularJS when utilizing partials

Invoke another component to display within a React.js application

TypeScript's type inference feature functions well in scenario one but encounters an error in a different situation