AngularJs iframe source update not invoking javascript methods

Question

Javascript's inbuilt methods are accessible through iframe but my custom javascript methods are not accessible.

I am updating iframe for two-way binding with angularjs, But after iframe source update, no javascript method is visible from iframe. It giving error no method found. Following is the plunker url for sample code

<http://plnkr.co/edit/JzptCOjShKaF9i8At1QL?p=preview>

In this example, testMethod() function is not found error displayed in console whereas Date() method is accessible.

Please let me know if I am missing anything http://plnkr.co/edit/JzptCOjShKaF9i8At1QL?p=preview

Answer 1

You need jQuery because jqlite do not execute script tag inside the template.

Also make sure you load the jQuery before angularjs so that angularJs uses that jQuery instead of jqlite.

After this also you will not be able to execute the method defined inside the script tag because when jQuery executes the script elm.contents().find('body').append(template it is doing it in the context of the parent document so those method are actually available in the parent document instead of iframe.

You can take a look in this plnkr with necessary modifications. http://plnkr.co/edit/ib2spZE7O5bPBoeqSr8P?p=preview