Błąd AngularJS: „argument„ FirstCtrl ”nie jest funkcją, został niezdefiniowany”

Question 1

Zauważyłem, że to samo pytanie zostało tutaj zadane kilka razy, próbowałem je rozwiązać, ale nic nie pomaga.

Śledzę ten samouczek z filmami z jajami.

Ale kiedy dostaję się do sekcji Kontrolery i udostępnianie danych między kontrolerami, nie mogę zmusić go do pracy.

Kiedy uruchamiam go z Chrome, pojawia się ten błąd w konsoli:

„argument„ FirstCtrl ”nie jest funkcją, został niezdefiniowany”.

Naprawdę nie wiem, co się stało. Kod jest taki sam jak w samouczku.

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

Question 2

Masz dwie nienazwane ng-appdyrektywy w swoim html.
Strać ten w swoim div.

Aktualizacja
Wypróbujmy inne podejście.
Zdefiniuj moduł w pliku js i przypisz ng-appdo niego dyrektywę. Następnie zdefiniuj kontroler jako komponent ng, a nie jako prostą funkcję:

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

a część js:

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

Oto demo online, które właśnie to robi: http://jsfiddle.net/FssbL/1/

Question 3

Otrzymałem dokładnie ten sam komunikat o błędzie iw moim przypadku okazało się, że nie wymieniłem pliku JS kontrolera (np. First-ctrl.js) w moim index.html

Question 4

Właśnie zrobiłem ten samouczek i podążałem za odpowiedzią @ gion_13. Nadal nie działa. Rozwiązałem to, czyniąc moją nazwę ng-app w indeksie identyczną z tą w moim pliku js. Dokładnie identyczne, nawet cytaty. Więc:

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

i js:

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

Dziwne, że aplikacja ng musi być identyczna, a kontroler ng nie.

Question 5

Musisz nazwać swojąng-app , nadając aplikacji przestrzeń nazw; samo użycie ng-app nie wystarczy .

Zamiast:

<html ng-app>
...

Zamiast tego będziesz potrzebować czegoś takiego:

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

Następnie tak:

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

Question 6

Kolejny fajny: przypadkowo przedefiniowanie modułów. Kopiowałem / wklejałem trochę zbyt chętnie wcześniej dzisiaj i skończyło się na tym, że mam gdzieś definicję modułu, którą zastąpiłem definicjami kontrolera:

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

Następnie w moich definicjach miałem się do tego odnieść w ten sposób:

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

Co ja zrobiłem , a nie było:

// 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() { /* ... */ });

Zwróć uwagę na dodatkowy nawias w wywołaniu angular.module.

Question 7

usuń ng-app = "" z

<div ng-app="">

i po prostu zrób to

<div>

Question 8

Ja też stanąłem przed tym samym problemem. Ale problem polegał na tym, że zapomniałem wymienić moduł na liście modułów, od których zależy ng-app.

Question 9

Napotkałem ten problem i naprawiłem go w następujący sposób:

najpierw usuń ng-app z:
```
<html ng-app>
```
dodaj nazwę ng-app do myApp:
```
<div ng-app="myApp">
```

dodaj tę linię kodu przed funkcją:

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

ostateczny wygląd scenariusza:

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

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

Question 10

W moim przypadku ta wiadomość pochodzi z zapomnianego wstrzyknięcia zależności w głównym module

Question 11

Może się tak zdarzyć, jeśli łyk źle skonfigurowałeś, aby dodać kod aplikacji kątowej więcej niż raz. W moim przypadku było to w index.js i dodawało go jako część katalogu plików js (globbed in gulp) przed i po deklaracjach kontrolera. Po dodaniu wykluczenia dla index.js, które nie miały być zminimalizowane i wstrzyknięte po raz drugi, moja aplikacja zaczęła działać. Kolejna wskazówka, jeśli którekolwiek z powyższych rozwiązań nie rozwiązuje Twojego problemu.

Question 12

Po pierwsze - jeśli nazwa modułu nie jest zdefiniowana, w JS nie będzie można uzyskać dostępu do modułu i powiązać z nim kontrolera.

Musisz podać nazwę modułu do modułu kątowego. istnieje różnica w używaniu również definiowania modułu 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - należy zadeklarować nowy moduł „firstModule” bez dodania zależności w drugich argumentach. 2 - To jest użycie "firstModule", który jest zainicjowany gdzie indziej i próbujesz pobrać zainicjowany moduł i dokonać w nim modyfikacji.

Question 13

Napotkałem ten problem, ale udało mi się go naprawić, zmieniając nazwę kontrolera, spróbuj go.

ctrlSub.execSummaryDocuments = function(){};

Question 14

czasami coś złego w składni kodu wewnątrz funkcji powoduje ten błąd. Sprawdź swoje działanie poprawnie. W moim przypadku stało się tak, gdy próbowałem przypisać polom Json wartości i użyłem dwukropka: aby przypisać zamiast znaku równości = ...

Question 15

Miałem dwa kontrolery o tej samej nazwie zdefiniowane w dwóch różnych plikach javascript. Irytujące, że angular nie może dać wyraźniejszego komunikatu o błędzie wskazującego na konflikt przestrzeni nazw.

Question 16

Nie jestem pewien co do tego samouczka, ale miałem ten sam problem, gdy zapomniałem dołączyć plik do procesu minimalizacji grunt / gulp.

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

Mam nadzieję, że to pomoże.

Question 17

Uważaj też na wielkość liter. Spędziłem dobrą godzinę na pogoni za tym robakiem.

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

podczas gdy ja nazywam kontrolera

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

Wszystkie powinny być konsekwentnie nazwane, w tym przypadku Forgot p wdController z małymi literami p.

Answer 1

Zauważyłem, że to samo pytanie zostało tutaj zadane kilka razy, próbowałem je rozwiązać, ale nic nie pomaga.

Śledzę ten samouczek z filmami z jajami.

Ale kiedy dostaję się do sekcji Kontrolery i udostępnianie danych między kontrolerami, nie mogę zmusić go do pracy.

Kiedy uruchamiam go z Chrome, pojawia się ten błąd w konsoli:

„argument„ FirstCtrl ”nie jest funkcją, został niezdefiniowany”.

Naprawdę nie wiem, co się stało. Kod jest taki sam jak w samouczku.

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

Answer 2

Oto rozwiązanie w drugim komentarzu - stackoverflow.com/questions/24894870/…

Kanchan

Answer 3

109

Masz dwie nienazwane ng-appdyrektywy w swoim html.
Strać ten w swoim div.

Aktualizacja
Wypróbujmy inne podejście.
Zdefiniuj moduł w pliku js i przypisz ng-appdo niego dyrektywę. Następnie zdefiniuj kontroler jako komponent ng, a nie jako prostą funkcję:

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

a część js:

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

Oto demo online, które właśnie to robi: http://jsfiddle.net/FssbL/1/

gion_13
źródło

Wielkie dzięki za odpowiedź, niestety nadal pojawia się ten sam błąd .. Więc zgubiłem ng-app = "" z div, ale nadal nie działa.

Pumba

1

Dziękuję bardzo za Twoją pomoc! Już tego nie rozumiem, zrobiłem dokładnie to samo, co pokazałeś tutaj i w demo online, ale nadal jest napisane, że „FirstCtrl” jest niezdefiniowane. Mam zamiar spróbować ponownie od początku, mam nadzieję, że zadziała, ponieważ w następnych samouczkach mam ten sam problem.

Pumba,

Świetny!! To działa. Zapomniałem zamknąć atrybut typu w tagu skryptu dla pliku js. I to w połączeniu z Twoim drugim rozwiązaniem sprawiło, że zadziałało! Dziękuję bardzo :))

Pumba

6

Film demonstracyjny nie obejmuje kontrolera w module. Więc dlaczego to działa dla niego, a nie dla mnie? egghead.io/lessons/angularjs-controllers

Demodave

2

@Demodave, mam to samo pytanie. Zakładam, że filmy zostały nagrane podczas wcześniejszej wersji AngularJS, a zatem definiowanie kontrolerów było potencjalnie mniej rygorystyczne (ale to tylko moje założenie, byłbym szczęśliwy, gdyby ktoś potwierdził lub zaprzeczył)

MandM

Answer 4

Wielkie dzięki za odpowiedź, niestety nadal pojawia się ten sam błąd .. Więc zgubiłem ng-app = "" z div, ale nadal nie działa.

Pumba

Answer 5

1

Dziękuję bardzo za Twoją pomoc! Już tego nie rozumiem, zrobiłem dokładnie to samo, co pokazałeś tutaj i w demo online, ale nadal jest napisane, że „FirstCtrl” jest niezdefiniowane. Mam zamiar spróbować ponownie od początku, mam nadzieję, że zadziała, ponieważ w następnych samouczkach mam ten sam problem.

Pumba,

Answer 6

Świetny!! To działa. Zapomniałem zamknąć atrybut typu w tagu skryptu dla pliku js. I to w połączeniu z Twoim drugim rozwiązaniem sprawiło, że zadziałało! Dziękuję bardzo :))

Pumba

Answer 7

6

Film demonstracyjny nie obejmuje kontrolera w module. Więc dlaczego to działa dla niego, a nie dla mnie? egghead.io/lessons/angularjs-controllers

Demodave

Answer 8

2

@Demodave, mam to samo pytanie. Zakładam, że filmy zostały nagrane podczas wcześniejszej wersji AngularJS, a zatem definiowanie kontrolerów było potencjalnie mniej rygorystyczne (ale to tylko moje założenie, byłbym szczęśliwy, gdyby ktoś potwierdził lub zaprzeczył)

MandM

Answer 9

93

Otrzymałem dokładnie ten sam komunikat o błędzie iw moim przypadku okazało się, że nie wymieniłem pliku JS kontrolera (np. First-ctrl.js) w moim index.html

Mariusz
źródło

1

Co masz na myśli, mówiąc, że nie wymieniłeś pliku js kontrolera? Mówisz, że go nie uwzględniłeś?

Demodave

@DavidStone tak - to był wtedy mój przypadek.

Mariusz

Kolejny błąd nooba: nawias Rouge itp. W kontrolerze może spowodować wyświetlenie tego samego typu błędu w konsoli.

user2938649

Answer 10

1

Co masz na myśli, mówiąc, że nie wymieniłeś pliku js kontrolera? Mówisz, że go nie uwzględniłeś?

Demodave

Answer 11

@DavidStone tak - to był wtedy mój przypadek.

Mariusz

Answer 12

Kolejny błąd nooba: nawias Rouge itp. W kontrolerze może spowodować wyświetlenie tego samego typu błędu w konsoli.

user2938649

Answer 13

Właśnie zrobiłem ten samouczek i podążałem za odpowiedzią @ gion_13. Nadal nie działa. Rozwiązałem to, czyniąc moją nazwę ng-app w indeksie identyczną z tą w moim pliku js. Dokładnie identyczne, nawet cytaty. Więc:

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

i js:

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

Dziwne, że aplikacja ng musi być identyczna, a kontroler ng nie.

Answer 14

Kosztowało mnie to

cztery

Answer 15

Musisz nazwać swojąng-app , nadając aplikacji przestrzeń nazw; samo użycie ng-app nie wystarczy .

Zamiast:

<html ng-app>
...

Zamiast tego będziesz potrzebować czegoś takiego:

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

Następnie tak:

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

Answer 16

Kolejny fajny: przypadkowo przedefiniowanie modułów. Kopiowałem / wklejałem trochę zbyt chętnie wcześniej dzisiaj i skończyło się na tym, że mam gdzieś definicję modułu, którą zastąpiłem definicjami kontrolera:

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

Następnie w moich definicjach miałem się do tego odnieść w ten sposób:

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

Co ja zrobiłem , a nie było:

// 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() { /* ... */ });

Zwróć uwagę na dodatkowy nawias w wywołaniu angular.module.

Answer 17

3

usuń ng-app = "" z

<div ng-app="">

i po prostu zrób to

<div>

John Smith
źródło

3

Jeśli używasz routingu w konfiguracji swojej aplikacji, upewnij się, że nie używasz ng-controller w html. Zamiast tego powinieneś mieć ng-view. Kontroler zostanie zwykle zdefiniowany wraz z widokami w routingu.

Marc

Answer 18

3

Jeśli używasz routingu w konfiguracji swojej aplikacji, upewnij się, że nie używasz ng-controller w html. Zamiast tego powinieneś mieć ng-view. Kontroler zostanie zwykle zdefiniowany wraz z widokami w routingu.

Marc

Answer 19

1

Ja też stanąłem przed tym samym problemem. Ale problem polegał na tym, że zapomniałem wymienić moduł na liście modułów, od których zależy ng-app.

źródło

3

To powinien być komentarz, a nie odpowiedź.

Anthony Perot

Answer 20

3

To powinien być komentarz, a nie odpowiedź.

Anthony Perot

Answer 21

Napotkałem ten problem i naprawiłem go w następujący sposób:

najpierw usuń ng-app z:
```
<html ng-app>
```
dodaj nazwę ng-app do myApp:
```
<div ng-app="myApp">
```

dodaj tę linię kodu przed funkcją:

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

ostateczny wygląd scenariusza:

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

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

Answer 22

1

W moim przypadku ta wiadomość pochodzi z zapomnianego wstrzyknięcia zależności w głównym module

Thomas Gobert
źródło

Answer 23

Może się tak zdarzyć, jeśli łyk źle skonfigurowałeś, aby dodać kod aplikacji kątowej więcej niż raz. W moim przypadku było to w index.js i dodawało go jako część katalogu plików js (globbed in gulp) przed i po deklaracjach kontrolera. Po dodaniu wykluczenia dla index.js, które nie miały być zminimalizowane i wstrzyknięte po raz drugi, moja aplikacja zaczęła działać. Kolejna wskazówka, jeśli którekolwiek z powyższych rozwiązań nie rozwiązuje Twojego problemu.

Answer 24

Po pierwsze - jeśli nazwa modułu nie jest zdefiniowana, w JS nie będzie można uzyskać dostępu do modułu i powiązać z nim kontrolera.

Musisz podać nazwę modułu do modułu kątowego. istnieje różnica w używaniu również definiowania modułu 1. angular.module ("firstModule", []) 2. angular.module ("firstModule")

1 - należy zadeklarować nowy moduł „firstModule” bez dodania zależności w drugich argumentach. 2 - To jest użycie "firstModule", który jest zainicjowany gdzie indziej i próbujesz pobrać zainicjowany moduł i dokonać w nim modyfikacji.

Answer 25

0

Napotkałem ten problem, ale udało mi się go naprawić, zmieniając nazwę kontrolera, spróbuj go.

ctrlSub.execSummaryDocuments = function(){};

Amay Kulkarni
źródło

Answer 26

czasami coś złego w składni kodu wewnątrz funkcji powoduje ten błąd. Sprawdź swoje działanie poprawnie. W moim przypadku stało się tak, gdy próbowałem przypisać polom Json wartości i użyłem dwukropka: aby przypisać zamiast znaku równości = ...

Answer 27

Miałem dwa kontrolery o tej samej nazwie zdefiniowane w dwóch różnych plikach javascript. Irytujące, że angular nie może dać wyraźniejszego komunikatu o błędzie wskazującego na konflikt przestrzeni nazw.

Answer 28

Nie jestem pewien co do tego samouczka, ale miałem ten sam problem, gdy zapomniałem dołączyć plik do procesu minimalizacji grunt / gulp.

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

Mam nadzieję, że to pomoże.

Answer 29

Uważaj też na wielkość liter. Spędziłem dobrą godzinę na pogoni za tym robakiem.

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

podczas gdy ja nazywam kontrolera

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

Wszystkie powinny być konsekwentnie nazwane, w tym przypadku Forgot p wdController z małymi literami p.

Błąd AngularJS: „argument„ FirstCtrl ”nie jest funkcją, został niezdefiniowany”

Odpowiedzi: