2017-01-04 4 views
0

Wenn ich versuche, dynamisch einen Controller zu laden, ich die folgende Fehlermeldung mit: sideCtrl & p1 = nicht% 20aNaNunction% 2C% 20got% 20undefinedrequirejs AngularJS Controller nicht definiert

aber für Seite1, der Code funktioniert fein. Hier ist mein Code:

main.js:

require.config({ 
    paths: { 
     jquery: ['//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min', 'lib/jquery/jquery_2.0.0.min.js'], 
     angular: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min', 'lib/angular/angular_1.2.16.min'], 
     angularRoute: ['//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.min', 'lib/angular-route/angular-route_1.2.16.min'] 
    }, 
    shim: { 
     'angular' : {'exports' : 'angular'}, 
     'angularRoute': ['angular'] 
    }, 
    deps: ['app'] 
}); 

config.js:

define([],function(){ 
    function config($routeProvider) { 
    $routeProvider 
     .when('/page1', { 
     templateUrl: 'templates/page1.html', 
     controller: 'mainCtrl' 
     }) 
     .when('/page2', { 
     templateUrl: 'templates/page2.html',   
     resolve: { 
      load: function($q, $route, $rootScope) { 

       var deferred = $q.defer(); 

       var dependencies = [ 
        'sideCtrl.js' 
       ]; 

       require(dependencies, function() { 
        $rootScope.$apply(function() { 
        deferred.resolve(); 
        }); 
       }); 
       return deferred.promise; 
      } 
     } 
     }) 
     .otherwise({redirectTo: '/page1'}); 
    } 
    config.$inject=['$routeProvider']; 

    return config; 
}); 

app.js

/*global require*/ 
'use strict'; 

define([ 
    'angular','angularRoute', 'mainCtrl', 'config' 
    ], function (angular, angularRoute,mainCtrl,config) { 
     var app = angular.module('app', ['ngRoute']); 
     app.config(config); 
     app.controller('mainCtrl', mainCtrl); 


     angular.bootstrap(document, ['app']);  
     return app; 
}); 

sideCtrl.js:

"use strict"; 
define(['app'], function (app) { 

    app.controller('sideCtrl', ['$scope', 
     function ($scope) { 
      console.log("hello world"); 
      $scope.names="krish"; 
      console.log("sideCtrl calling"); 
     } 
    ]); 
    console.log(app); 
    return app; 
}); 

page2.html

<div ng-controller="sideCtrl"> 
asdasdas 
    {{names}} 

</div> 

Antwort

0

Zugabe Controller Sie dynamisch es mit aktuellen aktiven Provider registrieren erfordert, daher können Sie es mit regulären „app.controller“ nicht registrieren können, was Sie tun müssen, ist es über $ registrieren controllerProvider.register

Mit freundlichen Grüßen

+0

Wenn ich das tue, das ist der Fehler: $ controllerProvider nicht – krish

+0

Sie müssen definiert wird es zuerst injizieren? Ich tue dies auf meiner Konfiguration 'app.provider '(' Resolver ',' $ controllerProvider ',' $ compileProvider ',' $ filterProvider ',' $ bereitstellen ', Funktion ($ controllerProvider, $ compileProvider, $ filterProvider, $ zur Verfügung stellen) { angular.register = { Controller: $ controllerProvider.register, Richtlinie: $ compileProvider.directive, Filter: $ filterProvider.register, Fabrik: $ provide.factory, Service: $ provide.service, Konstante: $ provide.constant };}]) ' – johnjerrico

+0

okay, mit app.controllerProvider anstelle von $ controllerProvider arbeitete für mich. Danke vielmals. – krish