CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Coded Container
Coded Container

Reputation: 863

Is it possible to use JQuery includes with Angular Includes?

I am working on an application that utilizes both Jquery and AngularJS includes, however Angular does not seem to execute after Jquery has included a file that has AngularJS markup. Jquery is including the "top_nav.html" template and inside this template there lives a angluar ng-include calling cart.html". I need to figure out how to get the angular code to execute after being included by jQuery.

<div id="topNav"></div>

<script> 
  //outside the document ready statment
  $('#topNav').load('includes/top_nav.html'); 
<script>

top_nav.html:

<div>
 ... 
  <div ng-controller="shoppingCart"
   class="shopping-cart"ng-include="'includes/cart.html'"></div>
</div>

Upvotes: 0

Views: 132

Answers (1)

falsarella
falsarella

Reputation: 12437

The jquery load does an ajax request. When the ajax is resolved, the angular have already been bootstrapped (assuming you use ng-app directive), so the html chunk that have been dynamically loaded was not bootstrapped by angular.

So, I guess that on the callback of the jquery load, you need to manually bootstrap angular passing <div id="topNav"></div> as the context. Something like this:

var topNav = $( "#topNav" );
topNav.load( "includes/top_nav.html", function() {
  angular.bootstrap(topNav.find("> div")[0], ['topNavAngularModule']);
});

Note: I'm not sure, sorry, I haven't tested it, but I think it might only work if #topNav is located outside ng-app.

Upvotes: 1

Related Questions