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

Posted 2023-03-07

【中文标题】Angular 在 jQuery Ajax 加载页面中不起作用

【英文标题】：Angular not work in jQuery Ajax loaded page

【发布时间】：2015-04-08 22:43:59

【问题描述】：

我使用 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>

但是该加载页面中的角度仍然无法工作，即使我尝试手动引导新加载页面的角度。

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

【参考方案1】：

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

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

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

【讨论】：

我不想在 show.ejs 中删除 ng-app，因为只有 show.ejs 绑定到 Angular 应用，而 homepage.ejs 应该远离 Angular。我尝试了 angular.bootstrap($('#outerDiv'), ['myApp'])，没有工作......

使用 bootstrap 时不需要使用 ng-app。您不必将其添加到任何其他页面..

感谢您的演示。我终于找到了原因。是因为$('#outerDiv').load("food/show")，这个页面不仅包含

【参考方案2】：

您的选择器缺少#：

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

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

angular.bootstrap($(this));

【讨论】：

这是我打错了，我真正的程序有#。我尝试了 $(this)。它也不起作用。