Ошибка AngularJS: 'аргумент' FirstCtrl 'не является функцией, получил неопределенное значение'

94

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

Я следую этому руководству с видео о яйцеголовых.

Но когда я попадаю в раздел «Контроллеры» и «Обмен данными между контроллерами», я не могу заставить его работать.

Когда я запускаю его с 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/…
Kanchan

Ответы:

109

В 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 = "" из div, но он все еще не работает.
Пумба
1
Спасибо большое за твою помощь! Я этого больше не понимаю, я сделал то же самое, что и вы показали здесь и в онлайн-демонстрации, но все равно говорится, что «FirstCtrl» не определено. Я попробую снова с самого начала, надеюсь, у меня все заработает, потому что в следующих уроках я столкнусь с той же проблемой.
Пумба
Большой!! Оно работает. Я забыл закрыть атрибут type в теге скрипта для файла js. И это в сочетании со вторым решением заставило его работать! Большое вам спасибо :))
Pumba
6
Демонстрационное видео не включает контроллер в модуль. Так почему у него это работает, а у меня нет? egghead.io/lessons/angularjs-controllers
Demodave
2
@Demodave, у меня такой же вопрос. Я предполагаю, что видео были записаны в более ранней версии AngularJS, и поэтому определение контроллеров было потенциально менее строгим (но это только мое предположение, я был бы рад, если кто-то подтвердит или опровергнет)
MandM
93

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

Мариуш
источник
1
Что вы имеете в виду, что не указали js-файл контроллера? Вы хотите сказать, что не включили его?
Demodave
@DavidStone, да, тогда это был мой случай.
Мариуш
Другая ошибка noob: круглые скобки Rouge и т. Д. В контроллере могут вызвать отображение ошибки того же типа в консоли.
user2938649 02
9

Я только что изучил этот урок и последовал ответу @ gion_13. Все равно не получилось. Решил это, сделав имя моего ng-app в индексе идентичным тому, что в моем js файле. Точно идентичны даже цитаты. Так:

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

и js:

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

Странно, как ng-app должно быть идентичным, а ng-controller - нет.

An1waukoni
источник
Это стоило мне четырех часов; (спасибо, что наконец помог мне разобраться.
Даулерс,
7

Вы должны назвать свойng-app , дав вашему приложению пространство имен; просто использовать ng-app недостаточно .

Вместо того:

<html ng-app>
...

Вместо этого вам понадобится что-то вроде этого:

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

Тогда вот так:

var app = angular.module("app", []).controller("ActionsController", function($scope){});
user1429980
источник
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-controller в html. Вместо этого у вас должен быть ng-view. Контроллер обычно определяется вместе с представлениями в маршрутизации.
Марк
1

Я тоже столкнулся с той же проблемой. Но проблема заключалась в том, что я забыл указать модуль в списке модулей, от которых зависит ng-app.


источник
3
Это должен быть комментарий, а не ответ.
Энтони Перо
1

Я столкнулся с этой проблемой, и она исправлена ​​следующим образом:

  1. сначала удалите ng-app из:

    <html ng-app>

  2. добавить имя ng-app в myApp:

    <div ng-app="myApp">

  3. добавьте эту строку кода перед функцией: 

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

окончательный вид скрипта:

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

function FirstCtrl($scope){
    $scope.data = {message: "Hello"};
}
Азхар
источник
1

В моем случае это сообщение возникает из-за забытой инъекции зависимостей в основном модуле.

Томас Гоберт
источник
1

Это может произойти, если вы неправильно сконфигурировали gulp для добавления кода приложения angular более одного раза. В моем случае это было в index.js, и он добавлял его как часть каталога файлов js (глобализированных в gulp) до и после моих объявлений контроллера. Как только я добавил исключение для index.js, чтобы его нельзя было минимизировать и вводить во второй раз, мое приложение начало работать. Еще один совет, если какое-либо из вышеперечисленных решений не решает вашу проблему.

rncrtr
источник
1

Во-первых, если имя модуля не определено, в JS вы не сможете получить доступ к модулю и связать с ним контроллер.

Вам необходимо указать имя модуля для модуля angular. также существует разница в использовании определяющего модуля 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - один из них - объявить новый модуль firstModule без добавления зависимостей во вторые аргументы. 2 - Это использование "firstModule", который инициализирован где-то еще, и вы пытаетесь получить инициализированный модуль и внести в него изменения.

Эшаан Кумар
источник
0

Я столкнулся с этой проблемой, но мне удалось исправить ее, переименовав контроллер, попробуйте.

ctrlSub.execSummaryDocuments = function(){};
Амай Кулкарни
источник
0

иногда что-то не так в синтаксисе кода внутри функции вызывает эту ошибку. Правильно проверьте свою функцию. В моем случае это произошло, когда я пытался назначить поля Json значениями и использовал двоеточие: чтобы сделать назначение вместо знака равенства = ...

Амитеш Ранджан
источник
0

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

thebiggestlebowski
источник
0

Я не уверен насчет этого руководства, но у меня была такая же проблема, когда я забыл включить файл в процесс минимизации grunt / gulp. 

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

Все они должны иметь одинаковые имена, в этом случае Forgot p wdController с строчной буквы p.

Джесон Мартаджая
источник