Подтвердить что ты не робот

Контроллер не является функцией, получил undefined, определяя контроллеры по всему миру

Я пишу пример приложения с использованием angularjs. Я получил ошибку, упомянутую ниже в браузере Chrome.

Ошибка

Ошибка: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Что отображается как

Аргумент "ContactController" не является функцией, получил undefined

код

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["[email protected]", "[email protected]"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

С Angular 1.3+ вы больше не можете использовать объявление глобального контроллера в глобальной области (без явной регистрации). Вам нужно будет зарегистрировать контроллер, используя синтаксис module.controller.

Пример: -

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

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

        };
    }]);

или

function ContactController($scope) {
    $scope.contacts = ["[email protected]", "[email protected]"];

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

Это измененное изменение, но можно отключить, чтобы использовать глобальные переменные, используя allowGlobals.

Пример: -

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

Вот комментарий от Angular source: -

  • проверьте, зарегистрирован ли контроллер с заданным именем через $controllerProvider
  • проверьте, возвращает ли строка в текущей области объект конструктор
  • если $controllerProvider # allowGlobals, проверьте window[constructor] на глобальном объекте window (не рекомендуется)
 .....

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

Некоторые дополнительные проверки: -

  • Обязательно поместите имя приложения в директиву ng-app на корневой элемент Angular (например: - html). Пример: - ng-app = "myApp"

  • Если все в порядке, и вы все еще получаете эту проблему, не забудьте убедиться, что у вас есть правильный файл, включенный в скрипты.

  • Вы не определили один и тот же модуль дважды в разных местах, в результате чего любые объекты, определенные ранее на том же модуле, будут очищены, пример angular.module('app',[]).controller(.. и снова в другом месте angular.module('app',[]).service(.. (с обоими сценариями конечно, может привести к тому, что ранее зарегистрированный контроллер на модуле app будет удален со второго воссоздания модуля.

Ответ 2

У меня возникла эта проблема, потому что я закрыл файл определения контроллера в закрытии:

(function() {
   ...stuff...
});

Но я забыл фактически вызвать это закрытие для выполнения этого кода определения и фактически сказать Javascript, что мой контроллер существует. 1.e, вышеуказанное должно быть:

(function() {
   ...stuff...
})();

Обратите внимание на() в конце.

Ответ 3

Я начинаю с Angular, и я сделал основную ошибку, не включая имя приложения в корневом элементе Angular. Итак, изменив код из

<html data-ng-app>

to

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

работал у меня. @PSL, накрыл это уже в своем ответе выше.

Ответ 4

У меня была эта ошибка, потому что я не понимал разницы между angular.module('myApp', []) и angular.module('myApp').

Этот создает модуль 'myApp' и перезаписывает любой существующий модуль с именем 'myApp':

angular.module('myApp', [])

Этот извлекает существующий модуль myApp:

angular.module('myApp')

Я переписывал свой модуль в другой файл, используя первый вызов выше, который создал другой модуль вместо того, чтобы извлекать, как я ожидал.

Подробнее здесь: https://docs.angularjs.org/guide/module

Ответ 5

Я просто перехожу к angular 1.3.3, и я обнаружил, что если у меня было несколько контроллеров в разных файлах, когда приложение переопределено, и я потерял первые объявленные контейнеры.

Я не знаю, хорошая ли практика, но, возможно, может быть полезной для другого.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

Ответ 6

У меня была эта проблема, когда я случайно обьявил myApp:

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

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

После переопределения Controller1 перестает работать и вызывает ошибку OP.

Ответ 7

На самом деле замечательный совет, за исключением того, что ошибка SAME может произойти просто путем исключения критического script include на вашей корневой странице

Пример:

page: index.html

   np-app="saleApp"

Отсутствует

<script src="./ordersController.js"></script>

Когда Маршруту сообщается, какой контроллер и просмотр обслуживают:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

Так важно, чтобы проблема контроллера undefined могла произойти в этой случайной ошибке, даже не ссылаясь на контроллер!

Ответ 8

Эта ошибка может также возникать, когда у вас большой проект со многими модулями. Убедитесь, что приложение (модуль), используемое в вашем файле angular, является тем же, что вы используете в своем шаблоне, в этом примере " thisApp".

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

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

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

Ответ 9

Если вы используете маршруты (с высокой вероятностью), и ваша конфигурация имеет ссылку на контроллер в модуле, который не объявлен как зависимость, тогда инициализация также может выйти из строя.

Например, если вы настроили ngRoute для своего приложения, например

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Будьте осторожны в блоке, который объявляет маршруты,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Объявить secondModule как зависимость после того, как 'ngRoute' должен решить проблему. Я знаю, что у меня была эта проблема.

Ответ 10

Я получал эту ошибку, потому что использовал более старую версию angular, которая не была совместима с моим кодом.

Ответ 11

Если все остальное не работает, и вы используете Gulp или что-то подобное... просто запустите его!

Я потратил 30 минут на четвереньку, проверяя все, когда все, что ему нужно, было быстрым ударом в штанах.

Ответ 12

Я получил ту же ошибку, следуя старому учебнику с (не достаточно старым) AngularJS 1.4.3. Самым простым решением является отредактировать angular.js источник из

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

к

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

и просто следуйте инструкциям как есть, и устаревшие глобальные функции просто работают как контроллеры.