Is there a way to insert jquery code into angularjs dom?

Question

So, I'm trying to create usercript for one website. I cannot change any source code of the website as it is not mine. The site uses AngularJS controllers everywhere. I’ve been exploring a couple of days how to do this, but failed.

So, I'm trying to enter the code $(".nav").after("<div>test</div>");, it works when I do it using the Firefox Developers Console, but why doesn't it work when I try to do it through UserScript.

I added $(function () { ... });thingy code so that it runs the descriptor after the DOM is ready, but it still doesn't work.

Is there any way to do this? I desperately understand how AngularJS works ...

I would appreciate any help.

Answer 1

Angular modifies the DOM after the page loads, so you need to wait a bit for the events or nodes you care about.

In addition, you must prevent your code (especially jQuery) from interfering with the page code. This means that you should try to keep the sandbox enabled.

For Firefox + Greasemonkey or Chrome + Tampermonkey (or the majority of engines that support the directive @require), you can use waitForKeyElements tool () , and @grantto achieve these goals.

This full sample script will work with both FF + GM and Chrome + TM:

// ==UserScript==
// @name     _Add a div after .nav elements
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

waitForKeyElements (".nav", addTestDiv);

function addTestDiv (jNode) {
    jNode.after ('<div>test</div>');
}

---

, @require (, Chrome), ! Tampermonkey .