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

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

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

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

Когда я запускаю его с помощью Chrome, я получаю эту ошибку в консоли:

'аргумент' FirstCtrl 'не является функцией, получил undefined'.

Я действительно не знаю, что случилось. Код тот же, что и в учебнике.

Вот код для 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"};
}

ОТВЕТЫ

Ответ 1

У вас есть две неназванные директивы ng-app в вашем html.
Потеряйте одно в своем div.

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

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

и часть js:

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

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

Ответ 2

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

Ответ 3

Я только что сделал этот учебник и ответил @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-приложение должно быть идентичным, но ng-controller этого не делает.

Ответ 4

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

Вместо:

<html ng-app>
...

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

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

Тогда, например:

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

Ответ 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.

Ответ 6

удалить ng-app = "" из

<div ng-app="">

и просто сделайте это

<div>

Ответ 7

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

Ответ 8

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

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

    <html ng-app>

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

    <div ng-app="myApp">

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

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

окончательный вид script:

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

ctrlSub.execSummaryDocuments = function(){};

Ответ 12

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

Ответ 13

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

Ответ 14

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

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

Надеюсь, что это поможет.

Ответ 15

Следите за своим обложкой. Я провел хороший час, преследуя эту ошибку.

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

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

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

Все они должны быть последовательно названы, в этом случае "Забыть p wdController с нижним регистром p.