Angular不能在jQuery Ajax中加载页面

我使用ajax来dynamic加载Sails项目视图/ homepage.ejs中的部分页面。 控制器是“食物”，“显示”是“食物”的一个动作，所以我有一个文件/views/food/show.ejs。 所以通过使用Ajax load food / show，会加载show.ejs。

$('#outerDiv').load("food/show",function(responseTxt,status,xhr){ if(status!=="error"){ alert("BOOT..."); //bootstrap angular angular.bootstrap($("#outerDiv")); } }); 

show.ejs的内容是这样的：

 <script> alert("LOAD.."); var app = angular.module("myApp",[]); app.controller("myCtrl",function (){ this.numInStock= 10; }) </script> <div ng-app="myApp" ng-controller="myCtrl"> <p>The number in stock is: {{numInStock}}</p> </div> 

但是，在加载页面的angular度仍然无法正常工作，即使我尝试手动启动angular度新的加载页面。

警报（LOAD …）是第一个，然后警报（BOOT …）接下来，而我发现新的页面已经呈现像“库存数量是{{numInStock}}”“。 很明显，这是错的，我希望它是“库存数量是：10”。

Chrome控制台出现错误：

 Uncaught Error: [ng:btstrpd] http://errors.angularjs.org/1.2.26/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22subPage%22%26gt%3B 

Answer 1

您需要从HTML中删除ng-app 。 您的Angular页面在页面加载时被初始化，因为您已经将它添加到HTML中。

1. 从HTML中删除ng-app
2. 将引导代码更改为：

angular.bootstrap($('#outerDiv'), ['myApp']);

更多信息： https ： //docs.angularjs.org/guide/bootstrap

但是，如果ajax页面需要几秒钟的加载，你仍然会看到花括号。 要解决这个问题，你可以使用ie ng-bind代替。

 <p>The number in stock is: <span ng-bind="numInStock"></span></p> 

Plnkr例子： http ://plnkr.co/edit/c6Y0kQulzvLbI2iCp7HZ?p=preview

Answer 2

您的select器缺less# ：

 angular.bootstrap($("#outerDiv")); 

你也可以使用this因为它会引用相同的元素，并保存另一个请求到DOM。

 angular.bootstrap($(this));