通过AJAX加载整个AngularJS页面

Question

我需要将整个旧页面（包括一些AJAX的AngularJS）加载到我们的新页面中。

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

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

但是后来我发现了这个带有这个demo的 stackoverflow线程 ， 该 线程使用$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

Answer 1

好像您没有在控制器中包含js文件，因为您只是在拉动主体。 股本参考可能在头部。 您将需要在主体中包含该js文件的链接，也可以将其动态添加回去。