通過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文件的鏈接，也可以將其動態添加回去。