1

I have a page with a pop-up I use on several pages and I load it using ng-include. In this pop-up there is three tabs also dynamically loaded using ng-include.

So my code looks like this:

<div ng-include="'/pages/ng-templates/Cockpit.html'"></div>

in Cockpit.html I have the following code:

<div id="dlgCockpit" class="Cockpit jquerydialog">
    <div id="tabs">
        <ul>
            <li><a href="#tabA">tabA</a></li>
            <li><a href="#tabB">tabB</a></li>
            <li><a href="#tabC">tabC</a></li>
        </ul>

        <div id="tabA">
            <div ng-include="'/pages/ng-templates/Cockpit-A.html'"></div>
        </div>
        <div id="tabB">
            <div ng-include="'/pages/ng-templates/Cockpit-B.html'"></div>
        </div>
        <div id="tabC">
            <div ng-include="'/pages/ng-templates/Cockpit-C.html'"></div>
        </div>
    </div>
</div>

<script src="/pages/ng-templates/scripts/Cockpit.js"></script>

In Cockpit-A.html I have the following Code:

<div id="dlgCockpitA">
    <form name="frmA" class="cntrCockpitA form" ng-controller="AController">
    <!-- some inputs using ng-model -->
    </form>
</div>
<script src="/pages/ng-templates/scripts/Cockpit-A.js"></script>

Cockpit.js:

function showCockpit(vsTnID, vsBenutzer) {
    $('#dlgCockpit').data('tnid', vsTnID);
    var $dialog = $("#dlgCockpit")
        .dialog({
            autoOpen: false,
            title: locBenutzer + ': ' + vsBenutzer + ' (ID: ' + vsTnID + ')',
            width: 1000,
            show: 'fade',
            resizable: false,
            open: function (event, ui) {
              $("#tabs").tabs({ active: 0 });
              angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');
            },
            close: function (event, ui) {
            }
        });

    $dialog.dialog('open');
    return false;
}

Cockpit-A.js:

app.controller('AController', ['$scope', '$http', function ($scope, $http) {
    //some function definitions on $scope
}]);

When I load the page I get the following in the javascript console:

Error: [ng:areq] Argument 'AController' is not a function, got undefined
http://errors.angularjs.org/1.2.26/ng/areq?p0=StammdatenController&p1=not%20aNaNunction%2C%20got%20undefined
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:78:12
    at assertArg (http://localhost:63323/scripts/angular/angular-1.2.26.js:1509:11)
    at assertArgFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:1519:3)
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:7278:9
    at http://localhost:63323/scripts/angular/angular-1.2.26.js:6670:34
    at forEach (http://localhost:63323/scripts/angular/angular-1.2.26.js:332:20)
    at nodeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6657:11)
    at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6105:13)
    at compositeLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6108:13)
    at publicLinkFn (http://localhost:63323/scripts/angular/angular-1.2.26.js:6001:30)

When calling showCockpit I get the following error in the line angular.element($('.cntrCockpitA')).scope().showStammdaten(vsTnID, 'Standard');:

Uncaught TypeError: undefined is not a function

Actually everything works if I put the script tag for Cockpit-A.js in the "base page" which is including Cockpit.html or if I create the Controller just by calling function AController($scope, $http) { ... }, but both of those are not an option.

Dominik G
  • 1,459
  • 3
  • 17
  • 37
  • It looks as though you are trying to include your controller after angular has bootstrapped, which it probably won't let you do. Can I ask why you need to do this, and why you can't load all your controllers in the base page or Cockpit.html? – Shoreline Nov 06 '14 at 11:19
  • As I said, this is included in several pages. Including it in the base page(s) would be possible, but then we'd have to include 5 additional script tags in every page all of this is included or include everything in one big javascript file. Sure it's possible it is just very inconvenient :) – Dominik G Nov 06 '14 at 12:41

1 Answers1

0

I had the exact same problem. Found a solution thanks to: http://ify.io/lazy-loading-in-angularjs/

Basically, it is not possible to use app.controller(...) after bootstrapping the app. I suggest reading the link for more information. The solution is to save the controllerProvider ahead and use it to register the module.

var app = angular.module('myModule', []);
app.config(function($controllerProvider) {
    app.controllerProvider = $controllerProvider;
});

// Later on... after bootstrapping...
app.controllerProvider.register('myController', function() {... });
Igal S.
  • 13,146
  • 5
  • 30
  • 48