发表新帖
发表新帖

Controller not a function, got undefined, while defining controllers globally

后端 未结
关注
14 1791
感动是毒
感动是毒 2020-11-22 00:22

I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.

Error is

Error: [ng:areq] http://errors.

相关标签:
14条回答
  • 青春惊慌失措
    2020-11-22 00:53

    I got the same error while following an old tutorial with (not old enough) AngularJS 1.4.3. By far the simplest solution is to edit angular.js source from

    function $ControllerProvider() {
  var controllers = {},
      globals = false;

    to

    function $ControllerProvider() {
  var controllers = {},
      globals = true;

    and just follow the tutorial as-is, and the deprecated global functions just work as controllers.

    0 讨论(0)
  • 情书的邮戳
    2020-11-22 00:54

    I had this problem when I accidentally redeclared myApp:

    var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

    After the redeclare, Controller1 stops working and raises the OP error.

    0 讨论(0)
  • 野趣味
    2020-11-22 00:57

    With Angular 1.3+ you can no longer use global controller declaration on the global scope (Without explicit registration). You would need to register the controller using module.controller syntax.

    Example:-

    angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

    or

    function ContactController($scope) {
    $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

    It is a breaking change but it can be turned off to use globals by using allowGlobals.

    Example:-

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

    Here is the comment from Angular source:-

    • check if a controller with given name is registered via $controllerProvider
    • check if evaluating the string on the current scope returns a constructor
    • if $controllerProvider#allowGlobals, check window[constructor] on the global window object (not recommended)
     .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

    Some additional checks:-

    • Do Make sure to put the appname in ng-app directive on your angular root element (eg:- html) as well. Example:- ng-app="myApp"

    • If everything is fine and you are still getting the issue do remember to make sure you have the right file included in the scripts.

    • You have not defined the same module twice in different places which results in any entities defined previously on the same module to be cleared out, Example angular.module('app',[]).controller(.. and again in another place angular.module('app',[]).service(.. (with both the scripts included of course) can cause the previously registered controller on the module app to be cleared out with the second recreation of module.

    0 讨论(0)
  • 执笔经年
    2020-11-22 00:58

    I am a beginner with Angular and I did the basic mistake of not including the app name in the angular root element. So, changing the code from

    <html data-ng-app>

    to 

    <html data-ng-app="myApp">

    worked for me. @PSL, has covered this already in his answer above.

    0 讨论(0)
  • 逝去的感伤
    2020-11-22 01:00

    This error, in my case, preceded by syntax error at find method of a list in IE11. so replaced find method by filter method as suggested https://github.com/flrs/visavail/issues/19

    then above controller not defined error resolved.

    0 讨论(0)
  • 隐瞒了意图╮
    2020-11-22 01:02

    I just migrate to angular 1.3.3 and I found that If I had multiple controllers in different files when app is override and I lost first declared containers.

    I don't know if is a good practise, but maybe can be helpful for another one.

    var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);
    0 讨论(0)
 看不清?
提交回复
热议问题