jquery - Angular 在 jQuery Ajax 加载页面中不起作用

Question

我使用ajax动态加载Sails项目views/homepage.ejs中的部分页面。 Controller 是“food”，“show”是“food”的一个 Action ，所以我有一个文件/views/food/show.ejs。因此通过使用Ajax加载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 。

Alert(LOAD...) 首先出现，然后 Alert(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 页面需要几秒钟加载，您仍然会看到大括号。要解决此问题，您可以使用 ng-bind 代替。

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

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