Помилка AngularJS: 'аргумент' FirstCtrl 'не є функцією, отримано невизначеним'

93

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

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

Але коли я потрапляю в розділ «Контролери та обмін даними між контролерами», я не можу змусити його працювати.

Коли я запускаю його з Chrome, я отримую цю помилку в консолі:

'аргумент' FirstCtrl 'не є функцією, не визначений'.

Я справді не знаю, що не так. Код той самий, що і в підручнику.

HTML

<!DOCTYPE html>
<html ng-app>
 <head>
    <title>AngularJS Tutorials: Controllers</title>
    <link rel="stylesheet" href="mystyle.css">
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
 </head>
 <body>
    <div ng-app="">
       <div ng-controller="FirstCtrl">   
           <h1> {{data.message + " world"}}</h1>

           <div class="{{data.message}}">
               Wrap me in a foundation component
           </div>
       </div>
    </div>
    <script type="text/javascript" src="main.js"></script>
 </body>
</html>

main.js

function FirstCtrl($scope){
   $scope.data = { message: "Hello" };
}

javascript angularjs

— Пумба
джерело

Ось рішення у другому коментарі - stackoverflow.com/questions/24894870/…

— Канчан

108

У ng-appвашому html є 2 неназвані директиви.
Втратити той у своєму div.

Оновлення
Давайте спробуємо інший підхід.
Визначте модуль у своєму js-файлі та призначте йому ng-appдирективу. Після цього визначте контролер як компонент ng, а не як просту функцію:

<div ng-app="myAppName">  
<!-- or what's the root node of your angular app -->

та частина js:

angular.module('myAppName', [])
    .controller('FirstCtrl', function($scope) {
         $scope.data = {message: 'Hello'};
    });

Ось онлайн-демонстрація, яка робить саме це: http://jsfiddle.net/FssbL/1/

— gion_13
джерело

Дякую за відповідь, на жаль, я все-таки отримую ту саму помилку .. Тож я втратив ng-app = "" з діва, але він все ще не працює.

— Пумба,

1

Щиро дякую за допомогу! Я більше цього не розумію, я зробив те саме, що ви показали тут і в онлайн-демонстрації, але там все одно написано, що "FirstCtrl" не визначено. Я збираюся спробувати це ще раз із самого початку, сподіваюся, я зроблю це робочим, тому що в наступних підручниках я отримую ту ж проблему.

— Пумба

Чудово !! Це працює. Я забув закрити атрибут type у тезі сценарію для js-файлу. І це в поєднанні з вашим другим рішенням спрацювало! Щиро дякую :))

— Пумба,

6

Демо-відео не обертає контролер всередині модуля. То чому це працює для нього, а не для мене? egghead.io/lessons/angularjs-controllers

— Demodave

2

@Demodave, у мене таке саме запитання. Я припускаю, що відеозаписи були записані під час попередньої версії AngularJS, і тому визначення контролерів було потенційно менш суворим (але, це лише моє припущення, я був би радий, щоб хтось підтвердив або спростував)

— MandM

93

Я отримав точно таке саме повідомлення про помилку, і в моєму випадку виявилося, що я не вказав файл JS контролера (наприклад, first-ctrl.js) у своєму index.html

— Маріуш
джерело

1

Що ти означає, що ти не вказав файл js контролера? Ви хочете сказати, що не включили його?

— Demodave

@DavidStone так - тоді це було моєю справою.

— Маріуш

Ще одна помилка noob: дужки Rouge тощо в контролері можуть призвести до того, що такий самий тип помилки відображається на консолі.

— користувач2938649

9

Я щойно зробив цей підручник і дотримувався відповіді @ gion_13. Все одно не вийшло. Вирішив це, зробивши ім’я мого ng-додатка в індексі ідентичним такому в моєму js-файлі. Точно ідентичні, навіть цитати. Так:

<div ng-app="myapp">
    <div ng-controller="FirstCtrl">

та js:

 angular.module("myapp", [])
.controller('FirstCtrl',function($scope) {
    $scope.data= {message:"hello"};
  });

Дивно, як ng-програма повинна бути ідентичною, а ng-контролер - ні.

— an1waukoni
джерело

Це мені коштувало чотири години; (, дякую, що нарешті допомогли мені розібратися.

— Dowlers

7

Ви повинні назвати своєng-app , надавши додатку простір імен; простого використання ng-app недостатньо .

Замість:

<html ng-app>
...

Натомість вам знадобиться щось подібне:

<html ng-app="app">
...

Тоді так:

var app = angular.module("app", []).controller("ActionsController", function($scope){});

— користувач1429980
джерело

5

Ще один приємний: Випадково перевизначення модулів. Я копіював / вставляв речі трохи занадто завзято сьогодні сьогодні, і в підсумку десь було дефініція модуля, яку я переставив з визначеннями мого контролера:

// controllers.js - dependencies in one place, perfectly fine
angular.module('my.controllers', [/* dependencies */]);

Тоді у своїх визначеннях я мав посилатися на це так:

// SomeCtrl.js - grab the module, add the controller
angular.module('my.controllers')
 .controller('SomeCtrl', function() { /* ... */ });

Що я зробив замість цього:

// Do not try this at home!

// SomeCtrl.js
angular.module('my.controllers', []) // <-- redefined module, no harm done yet
  .controller('SomeCtrl', function() { /* ... */ });

// SomeOtherCtrl.js
angular.module('my.controllers', []) // <-- redefined module - SomeCtrl no longer accessible
  .controller('SomeOtherCtrl', function() { /* ... */ });

Зверніть увагу на додаткову дужку у дзвінку angular.module.

— Майкл Джесс
джерело

3

видалити ng-app = "" з

<div ng-app="">

і просто зробити це

<div>

— Джон Сміт
джерело

3

Якщо ви використовуєте маршрутизацію в конфігурації вашого додатка, зробіть так, щоб ви не використовували ng-контролер у html. Натомість ви повинні мати ng-view. Контролер зазвичай визначається разом з видами в маршрутизації.

— Марк

1

Я теж стикався з тим же питанням. Але проблема полягала в тому, що я забув вказати модуль у списку модулів, від яких залежить програма ng.

3

Це повинен бути коментар, а не відповідь.

— Ентоні Перот

1

Я зіткнувся з цією проблемою і вирішив її таким чином:

спочатку видаліть ng-додаток з:
```
<html ng-app>
```
додати ім’я ng-програми до myApp:
```
<div ng-app="myApp">
```
додайте цей рядок коду перед функцією:
```
angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);
```

остаточний вигляд сценарію:

angular.module('myApp', []).controller('FirstCtrl',FirstCtrl);

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}

— Азхар
джерело

1

У моєму випадку це повідомлення походить від забутої ін'єкції залежностей в основному модулі

— Томас Гоберт
джерело

1

Це може трапитися, якщо ви невірно налаштували ковток, щоб додати свій кутовий код програми більше одного разу. У моєму випадку це було в index.js, і він додавав його як частину каталогу js-файлів (з глобусом) до та після моїх оголошень контролера. Після того, як я додав виключення для index.js, який не слід зменшувати, і ввів інший раз, мій додаток почав працювати. Ще одна порада, якщо будь-яке з вищезазначених рішень не вирішує вашу проблему.

— rncrtr
джерело

1

По-перше - якщо ім'я модуля не визначено, у JS ви не зможете отримати доступ до модуля та зв’язати з ним контролер.

Вам потрібно вказати ім'я модуля для кутового модуля. є різниця і в використанні визначального модуля 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - один - оголосити новий модуль "firstModule" без залежності, що додається у другому аргументі. 2 - Це використовувати "firstModule", який ініціалізується десь в іншому місці, і ви використовуєте спробу отримати ініціалізований модуль і внести його зміни.

— Ешаан Кумар
джерело

0

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

ctrlSub.execSummaryDocuments = function(){};

— Амай Кулкарні
джерело

0

іноді щось не так у синтаксисі коду всередині функції кидає цю помилку. Перевірте свою функцію правильно. У моєму випадку це сталося, коли я намагався призначити поля Json зі значеннями і використовував двокрапку: щоб зробити присвоєння замість знака рівності = ...

— Амітеш Ранджан
джерело

0

У мене було два контролери з однаковим іменем, визначені у двох різних файлах javascript. Дратує, що angular не може дати чіткіше повідомлення про помилку, що вказує на конфлікт простору імен.

— найбільшийлебовський
джерело

0

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

grunt.initConfig({
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/missing_controller.js']
      }
    }
  }
});

Сподіваюся, що це допомагає.

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

0

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

<section id="forgotpwd" ng-controller="ForgotPwdController">

поки я називаю контролер

angular
    .module('app')
    .controller('ForgotpwdController', ForgotpwdController);

Усі вони повинні мати послідовні імена, у цьому випадку Забув p wdController з малими літерами p.

— Джесон Мартаджая
джерело