1

I need to load a whole legacy page including some AngularJS by AJAX into our new page.

At first it didn't work at all, I just got the plain AngularJS markup e.g.

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

But then I found this stackoverflow thread with this demo, which uses $compile and works perfectly fine for the given example in the thread. So I tried to get it running with my code and now I get following error message

Error: [ng:areq] Argument 'HighscoreCtrl' is not a function, got undefined

I use $.get to get the whole Angular-Page and filter the response for the div holding all the content (angular markup, module and controller), which then gets put into the div#mainContent.

jQuery get:

$.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();
  });

body contains:

<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>

I already tried to split the angular part and include the module and controller before compiling the markup, but that didn't work either.

Is what I'm trying to do even possible?

Here is a simple example I created to test my code: plnkr-Demo

Community
  • 1
  • 1
Tobias Delp
  • 53
  • 7

1 Answers1

0

It looks like you have not included the js file for your controller since you are just pulling in the body. The scrip reference is probably in the head section. You will need to include the link to that js file either in the body or dynamically adding it back in.

Josh Pendergrass
  • 160
  • 9
  • The body contains the controller. So, I thought this would be sufficient. If I copy the controller part into `index.html` and change the variable name of my module before assigning, it works just fine ([see this plnkr](http://plnkr.co/edit/7DqZKh5zSC8P7eexWt4a?p=preview). But unfortunately I can't do this in our real life application. – Tobias Delp Nov 22 '15 at 23:12
  • when you say the body contains the controller. Do you mean the parent body or the child Ajax loaded body? How is it in your actual application like your question or like you plnkr. Can you post a sample of how it actually is? – Josh Pendergrass Nov 22 '15 at 23:18
  • `body` is the variable I load the `
    ` from ajax.html into (see the "jQuery get"-code block). Then I use `$("#mainContent").html(...)` to "paste" it into my index.html. You can see the content of the variable `body` in my last code block. It contains the angular markup and the controller declaration itself. My question and the plnkr I added should be the same, as I just copied parts out of the plnkr into my question. And the plnkr looks like the actual application, just very simplified.
     – Tobias Delp Nov 23 '15 at 09:46
  • I have run into a similar issue my issue had to do with the order that scripts loaded on the page chrome was a big offender. I suspect that is an issue of either the dom not being ready when the script is or vice versa. What I did to solve my issue was to wrap the js code on the child in to an init function. and then i called the init function after loading my page via ajax. – Josh Pendergrass Nov 24 '15 at 01:31