Including angular load with a jquery.load()
Robert B. Weeks
I have this situation where in certain places in our app, a resource will be loaded via the jquery load statement - say something like:
{page information }
<script...
$('#settings_container').load(interfaceComponentURL);
</script>
{page information}
where the 'interfaceComponentURL' is an external page that has the script loading call to angular, and the supporting scripts and view.
When I load this page in normally - the binding and all works correctly - but when loading in as a "partial" into an existing page using the format above, the binding/bootloading doesn't seem to be happening.
The content of the 'interfaceComponentURL' contains text like <snippets>:
<script type="text/javascript">
//<![CDATA[
function InterfaceSettingsForm($invalidWidgets) {
this.$invalidWidgets = $invalidWidgets;
....
}
//]]>
</script>
<div ng:controller="InterfaceSettingsForm">
... Form information here
</div>
<script type="text/javascript" src="/osgi/myResources/js/angular/angular.min.js" ng:autobind></script>
(I have also tried loading the angular lib before the above script)
The page in question does have the namespace defined in the <html tag.
Should I be binding/initializing somehow differently here?
Thanks for any help.
--
Robert B. Weeks
Igor Minar
--
You received this message because you are subscribed to the Google Groups "angular" group.
To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/angular?hl=en.
Robert B. Weeks
> Hi!
>
> is the including page an angular app or is only the included page an angular app?
Only the included page. These are resources loaded in from OSGi bundles into a legacy app, which is injected with the angular libraries.
> the issue is that ng:autobind depends on DOMContentLoaded or document.load events and both of these fired on the including page way before the jquery call to load angular page.
Ah - ok. That makes sense. I was trying to track down the sequence of the jquery load.
> if only the included app is an angular app then all you need is removing ng:autobind and compile/bootstrap your app manually:
>
> $('#settings_container').load(interfaceComponentURL, function() {
> angular.compile($('#settings_container'))();
> });
>
> if this doesn't work because angular is undefined, then jquery didn't evaluate your javascript on requested page and that would be sad. But I believe that that should not be the case.
That would be sad! :)
> let us know if this worked...
From preliminary work this morning - this did work. Thanks *so* much for the fast reply. This saved me more head-banging today! :)
*Love* angular. Have been touting it all over the place lately. Great work.
Igor Minar
Terry Go
I'm facing exactly same problem as Robert had but the solution you suggested is no longer available in v1.2.14.
Do you have any other approach to handle jQuery loading Angular template?
Thanks,
Terry