通过 AJAX 加载整个 AngularJS 页面答案

【问题标题】：Load whole AngularJS page by AJAX通过 AJAX 加载整个 AngularJS 页面
【发布时间】：2015-11-23 05:34:39
【问题描述】：

我需要通过 AJAX 将包括一些 AngularJS 在内的整个旧页面加载到我们的新页面中。

起初它根本不起作用，我只是得到了普通的 AngularJS 标记，例如

Rank         ID
{{$index+1}} {{player.playerid}}

但后来我发现this stackoverflow thread 和this demo，它使用$compile 并且对于线程中的给定示例工作得非常好。因此，我尝试使用我的代码运行它，现在我收到以下错误消息

错误：[ng:areq] 参数 'HighscoreCtrl' 不是函数，未定义

我使用$.get 获取整个Angular-Page 并过滤包含所有内容（角度标记、模块和控制器）的div 的响应，然后将其放入div#mainContent。

jQuery 获取：

$.get(link, function(data) {

  var temp = $(data);

  var links = temp.filter('link');
  var scripts = temp.not('div').not('link').not('meta').not('title');
  var body = temp.filter('#test123');

  console.log(body);
  $("#mainContent").html(
      $compile(
        body
      )($scope));
    $scope.$apply();
  });

正文包含：

<div id="test123" ng-app="indexApp">
  <div class="container" ng-controller="HighscoreCtrl">

    <table class="table">
      <tr>
          <th>Rank</th>
          <th>ID</th>
      </tr>
      <tr ng-repeat="player in players">
          <td>{{$index+1}}</td>
          <td>{{player.playerid}}</td>
      </tr>
    </table>
  </div>
  <script type="text/javascript">
    var angularModule = angular.module('indexApp', []);

    angularModule.controller('HighscoreCtrl', function($scope, $http){
        $scope.players = [
                    { playerid: "Joe#2293"},
                    { playerid: "Joe#0815"}
                ];
    });
  </script>
</div>

我已经尝试在编译标记之前拆分角度部分并包含模块和控制器，但这也不起作用。

我正在尝试做的事情可能吗？

这是我为测试代码而创建的一个简单示例： plnkr-Demo

【问题讨论】：

标签： javascript jquery html angularjs ajax

【解决方案1】：

看起来您没有包含控制器的 js 文件，因为您只是在拉入正文。脚本参考可能在头部。您需要在正文中包含指向该 js 文件的链接，或者将其动态添加回来。

【讨论】：

主体包含控制器。所以，我认为这就足够了。如果我将控制器部分复制到index.html 并在分配之前更改我的模块的变量名称，它就可以正常工作（see this plnkr。但不幸的是，我无法在我们的实际应用程序中这样做。
当你说 body 包含控制器时。你的意思是父体还是子Ajax加载体？它在您的实际应用程序中如何，例如您的问题或您的 plnkr。你能发布一个实际情况的样本吗？
body 是我将 <div id="test123"> 从 ajax.html 加载到的变量（请参阅“jQuery get”代码块）。然后我使用$("#mainContent").html(...) 将其“粘贴”到我的 index.html 中。您可以在我的最后一个代码块中看到变量body 的内容。它包含角度标记和控制器声明本身。我的问题和我添加的 plnkr 应该是相同的，因为我只是将部分从 plnkr 复制到我的问题中。 plnkr 看起来像实际的应用程序，只是非常简化。
我遇到了一个类似的问题，我的问题与加载到页面 chrome 上的脚本的顺序有关，这是一个大问题。我怀疑这是当脚本准备好时dom没有准备好的问题，反之亦然。我为解决我的问题所做的是将孩子上的 js 代码包装到一个 init 函数中。然后我在通过 ajax 加载我的页面后调用了 init 函数。