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

Question

我使用 ajax 在 Sails 项目 views/homepage.ejs 中动态加载部分页面。控制器是"food"，"show"是"food"的一个动作，所以我有一个文件/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仍然无法工作，即使我尝试为新加载的页面手动bootstrap angular。

Alert(LOAD...) 先出现，然后是 Alert(BOOT...)，而我发现新页面已经呈现为 "The number in stock is: {{numInStock}}"。很明显，不对，我要的是"The number in stock is: 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

您的选择器缺少 #:

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

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

angular.bootstrap($(this));

Answer 2

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

从您的 HTML
将bootstrap代码更改为：

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

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

Angular not work in jQuery Ajax loaded page

ajax

jquery

node.js

angularjs

sails.js