Question

我正在开发一个同时利用Jquery和AngularJS包含的应用程序，但是在Jquery包含具有AngularJS标记的文件之后，Angular似乎没有执行。 Jquery包含了“top_nav.html”模板，在这个模板中有一个名为“包含调用cart.html”的内容。我需要弄明白如何在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>

Answer 1

jquery加载执行ajax请求。当解析ajax时，角度已经被自举（假设你使用ng-app指令），所以动态加载的html块没有被angular引导。

所以，我想在callback of the jquery load上，您需要manually bootstrap angular传递<div id="topNav"></div>作为上下文。像这样：

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

^{注意：我不确定，抱歉，我还没有对其进行测试，但我认为只有#topNav位于 ng-app之外，它才有用。
功能}

是否可以使用包含Angular Includes的JQuery包含？

1 个答案: