Контролер не є функцією, не визначений, при цьому визначаючи контролери в усьому світі

123

Я пишу зразок заяви за допомогою 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" не є функцією, не визначений

Код

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["abcd@gmail.com", "abcd@yahoo.co.in"];

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

— витівки
джерело

172

За допомогою Angular 1.3+ ви більше не можете використовувати глобальну декларацію контролера в глобальному масштабі (Без явної реєстрації). Вам потрібно зареєструвати контролер за допомогоюmodule.controller синтаксису.

Приклад: -

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 = "";

        };
    }]);

або

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

Це невід'ємна зміна, але її можна вимкнути, використовуючи глобали, використовуючиallowGlobals .

Приклад: -

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

Ось коментар з Angular джерела: -

перевірте, чи зареєстрований контролер з таким ім'ям через $controllerProvider

перевірте, чи повертає оцінку рядок на поточну область конструктора

якщо $ controllerProvider # enableGlobals, перевірте window[constructor]глобальний windowоб'єкт (не рекомендується)

 .....

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

Деякі додаткові перевірки: -

Обов’язково ng-appвведіть ім'я програми в директиву і на ваш кутовий кореневий елемент (наприклад: - html). Приклад: - ng-app = "myApp"
Якщо все в порядку, і у вас все ще виникає проблема, не забудьте переконатися, що в скриптах включений правильний файл.
Ви не визначили той же модуль двічі в різних місцях, результати в будь-яких об'єктів , визначених раніше на тому ж модулі , щоб бути очищені, приклад angular.module('app',[]).controller(..і знову в іншому місці angular.module('app',[]).service(..(з обох сценаріїв , включених звичайно) може привести до раніше зареєстрованого контролера на модуль, appякий слід очистити з другим відтворенням модуля.

— PSL
джерело

Як перевірити це, як пропонується? перевірити, чи зареєстрований контролер з вказаним іменем через $ controllerProvider

— geckob

app.register.controller ("TheController", TheController); зробив трюк для мене.

— morph85

33

У мене виникла ця проблема, тому що я завернув файл визначення контролера у закритті:

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

Але я забув фактично викликати це закриття для виконання цього коду визначення і фактично сказати Javascript, що мій контролер існував. Тобто, вищезазначене повинно бути:

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

Зауважте () в кінці.

— негідник
джерело

1

+1 Цікаво, що, здається, візуальна студія іноді автоматично видаляє виклик. Я скопіював існуючий js-файл, що містить цей код; оригінал мав виклик, скопійований файл - ні.

— papergodzilla

16

Я початківець з Angular, і я допустив основну помилку, не включаючи ім’я програми в елемент кутового кореня. Отже, зміна коду з

<html data-ng-app>

до

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

працював на мене. @PSL, висвітлив це вже у своїй відповіді вище.

— Пракаш Тіварі
джерело

8

У мене була ця помилка, оскільки я не розумів різниці між angular.module('myApp', [])іangular.module('myApp') .

Це створює модуль 'myApp' і перезаписує будь-який існуючий модуль під назвою 'myApp':

angular.module('myApp', [])

Це отримує наявний модуль 'myApp':

angular.module('myApp')

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

Детальніше тут: https://docs.angularjs.org/guide/module

— Джейк Стюарт
джерело

1

У моєму випадку я додав модуль, додав контролер, але забув додати модуль у список модуля для програми. `angular.module (" додаток ", [HEREYOURMODULE] ...`

— Томас

3

Я просто переходжу на кутовий 1.3.3 і виявив, що якщо у мене було кілька контролерів у різних файлах, коли додаток переосмислюється, і я втратив перші оголошені контейнери.

Я не знаю, чи це хороша практика, але, можливо, це може бути корисним для іншого.

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

— Франці
джерело

2

У мене була ця проблема, коли я випадково переоформився myApp:

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

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

Після повторного декларування Controller1перестає працювати і викликає помилку OP.

— Даніель Фліппанс
джерело

2

Насправді чудово радимо, за винятком того, що однакова помилка МОЖЕ статися просто через відсутність критичного сценарію, включеного у вашу кореневу сторінку

приклад:

сторінка: index.html

   np-app="saleApp"

Відсутній

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

Коли маршруту повідомляється, що таке контролер і перегляд:

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

Настільки важливо, що невизначена проблема контролера МОЖЕ виникнути в цій випадковій помилці, навіть не посилаючись на контролер!

— Том Стікель
джерело

0

Ця помилка також може виникнути, коли у вас великий проект з багатьма модулями. Переконайтеся, що додаток (модуль), який використовується у вашому кутовому файлі, є тим самим, який ви використовуєте у вашому шаблоні, у цьому прикладі " thisApp ".

app.js

angular
.module('thisApp', [])
    .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 = "";

        };
    }]);

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>

— Патрік
джерело

0

Якщо все інше не вдається, і ви використовуєте Gulp або щось подібне ... просто повторіть це!

Я витратив вчетверо 30 хвилин, перевіряючи все, коли все, що було потрібно, був швидким ударом у штани.

— sigmapi13
джерело

0

Якщо ви використовуєте маршрути (висока ймовірність) і ваш конфігурація має посилання на контролер у модулі, який не оголошено як залежність, то ініціалізація може також вийти з ладу.

Наприклад, якщо ви налаштували ngRoute для свого додатка, наприклад

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

Будьте уважні в блоці, який оголошує маршрути,

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

Оголосити secondModuleзалежність після "ngRoute" має вирішити проблему. Я знаю, у мене була ця проблема.

— H.Rabiee
джерело

0

Я отримував цю помилку, тому що використовував старішу версію кутового, що не сумісна з моїм кодом.

— Дін Ша
джерело

0

Ці помилки, у моєму випадку, передували синтаксичним помилкам у fuction list.find (); Метод "find" списку, не розпізнаного IE11, тому має замінити метод Filter, який працює як для IE11, так і для chrome. див. https://github.com/flrs/visavail/isissue/19

— HydTechie
джерело

0

Цій помилці, в моєму випадку, передувала помилка синтаксису при пошуку методу списку в IE11. тому замінено метод пошуку методом фільтра, як запропоновано https://github.com/flrs/visavail/isissue/19

тоді вище контролера не визначено помилку вирішено.

— HydTechie
джерело

-3

Я отримав таку ж помилку, дотримуючись старого підручника з (недостатньо старим) AngularJS 1.4.3. На сьогодні найпростіше рішення - редагувати джерело angular.js з

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

до

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

і просто дотримуйтесь підручника як є, а застарілі глобальні функції просто працюють як контролери.

— МКаама
джерело

Це погана практика. Як згадується у відповіді PSL, ви можете зробити так:

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

— gm2008

-1. Це також чудовий спосіб переконатися, що (а) ви перезаписаєте це, як тільки оновите, що створить непотрібні (і неправильні) звіти про те, що "оновлення 1.4.3 до 1.4.4 зламало мою програму!" та / або (b) ви не оновлюєте додаток, оскільки "це важко".

— Філіп Коплі