Błąd: argument nie jest funkcją, został zdefiniowany

120

Używając AngularJS ze Scala Play, otrzymuję ten błąd.

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

Próbuję stworzyć tabelę składającą się z dni tygodnia.

Spójrz na mój kod. Sprawdziłem nazwę kontrolera, ale wydaje się, że jest poprawna. Uwaga: kod użyty w tej odpowiedzi SO

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

angularjs playframework Kevin Meredith
źródło

15

W html, gdzie ng-appng-app=myApp

używałeś,

Mam ten sam błąd @Chandermani

Kevin Meredith,

Czy próbowałeś usunąć zamknięcie (IIFE) z kodu? Kiedy miałem ten problem, było to spowodowane błędem PHP w moim javascript.

Kevin Beal,

1

Możesz sprawdzić swój problem, korzystając z tej listy kontrolnej: stackoverflow.com/a/26797874/930170

Sergei Panfilov

Potwierdź, czy dodałeś plik MainCtrl.controller.js w pliku BundleConfig.cs

Syed Mohamed

107

Usuń []z nazwy ([myApp]) modułu

angular.module('myApp', [])

I dodaj ng-app="myApp"do HTML i powinno działać.

Chandermani
źródło

1

Wszystko, co musiałem zrobić, aby to działało, to druga sugestia (tj. Set ng-app = "myApp"). Jeśli usunąłem [], pojawił się kolejny błąd.

Jason,

15

Posiadanie drugiego parametru []oznacza, że tworzysz nowy moduł. Usunięcie drugiego parametru oznacza, że pobierasz istniejący moduł. Tak więc jedną z możliwości sprawdzenia jest to, czy dzwonisz angular.moduledwa razy, za każdym razem włączając drugi parametr. Jeśli tak, to późniejsze wystąpienie nadpisze drugie, ukrywając definicje kontrolerów do tego momentu.

Carl G,

26

Kiedy mówi o usunięciu [], odnosi się do pierwszego parametru, w którym OP ma [myApp]zamiast myApp. Nie mówi o drugim parametrze.

Kevin Beal

1

Sprawdź nazwę kontrolera, jeśli używasz tras. W nazwie kontrolera w definicji trasy rozróżniana jest wielkość liter.

Latin Warrior

78

PIERWSZY. sprawdź, czy masz poprawne controllerdefinicje tras, takie same jak nazwy kontrolerów, które definiujesz

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

różne nazwy kontrolerów w tym przykładzie prowadzą do błędów, ale ten przykład jest poprawny

PO DRUGIE sprawdź, czy zaimportowałeś plik javascript:

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

pleerock
źródło

30

Z mojego doświadczenia wynika, że problem zawsze stanowi twoja „druga”. Często zapominam o zaimportowaniu moich kontrolerów doindex.html

msanford,

W moim przypadku był to również drugi, zapomniałem zaimportować pliku JS ...

Saurabh Misra

26

Miałem ten sam komunikat o błędzie (w moim przypadku: „Argument 'languageSelectorCtrl' nie jest funkcją, został zdefiniowany”).

Po żmudnym porównaniu z kodem zarodka Angulara dowiedziałem się, że wcześniej usunąłem odniesienie do modułu controllers w app.js. (znajdź to na https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Więc miałem to:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

To się nie udało.

A kiedy dodałem brakujące odniesienie:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

Komunikat o błędzie zniknął i Angular mógł ponownie zainicjować kontrolery.

bertrand
źródło

miał ten sam problem, moim problemem było to, że zapomniałem dodać kontrolera do modułu aplikacji ... dlaczego nie dzieje się to automatycznie? w każdym razie dzięki!

TheZuck

16

Czasami ten błąd jest wynikiem dwóch ng-app dyrektyw określonych w html. W moim przypadku przez pomyłkę określiłem ng-appw swoim htmltagu i ng-app="myApp"w bodytagu w następujący sposób:

<html ng-app>
  <body ng-app="myApp"></body>
</html>

Gaurav
źródło

1

Zdarzyło mi się to, gdy nie dodałem wtrysku do modułu myApp.

Ghandhikus

Dziękuję Ci! To rozwiązało mój problem.

bradden_gross

6

To poważnie zajęło mi 4 GODZINY (wliczając niekończące się wyszukiwania na SO), ale w końcu to znalazłem: przez pomyłkę (nieumyślnie) dodałem gdzieś spację.

Czy potrafisz to dostrzec?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

Więc ... 4 godziny później zobaczyłem, że powinno być:

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

Prawie niemożliwe do zobaczenia gołym okiem.

Podkreśla to kluczowe znaczenie kontroli wersji (git lub cokolwiek) oraz testów jednostkowych / regresyjnych.

Lew
źródło

1

Moja odpowiedź nie była dodatkową przestrzenią, ale doprowadziła mnie do mojej poprawki. Miałem Controllerzamiast controlleri to wystarczyło.

Grandizer

I nazwałem mój plik options-moda.controller.js, ale szukałem options-modal.controller.js DOH!

theFish

Mój był, ponieważ zapomniałem dodać .js w BundleConfig. Proste, ale frustrujące.

Ege Bayrak

4

Napotkałem ten sam problem iw moim przypadku stało się to w wyniku tego problemu:

Miałem kontrolery zdefiniowane w oddzielnym module (zwanym „myApp.controllers”) i wstrzyknięte do głównego modułu aplikacji (zwanego „myApp”) w następujący sposób:

angular.module('myApp', ['myApp.controllers'])

Kolega umieścił inny moduł kontrolera w oddzielnym pliku, ale o dokładnie takiej samej nazwie jak moja (tj. „MyApp.controllers”), który spowodował ten błąd. Myślę, że ponieważ Angular pomylił te moduły kontrolera. Jednak komunikat o błędzie nie był zbyt pomocny w odkrywaniu, co się dzieje.

Lilla Eli
źródło

1

Powinno to zostać naprawione poprzez usunięcie drugiego parametru w module ... Aby uzyskać istniejący moduł za pomocą angular.module („myApp”) bez drugiego parametru. tj. angular.module ('myApp'). contoller (...)

Santhosh

3

W moim przypadku (mając stronę przeglądu i stronę „dodaj”) otrzymałem to z moją konfiguracją routingu, jak poniżej. Podawał komunikat dla AddCtrl, którego nie można było wstrzyknąć ...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

Z powodu when('/' trasy wszystkie moje trasy przeszły do przeglądu i nie można było dopasować kontrolera do renderowania strony / add route. To było mylące, ponieważ widziałem szablon add.html, ale nigdzie nie można było znaleźć jego kontrolera.

Usunięcie trasy „/”, gdy sprawa rozwiązało ten problem.

EeKay
źródło

Otrzymałem również ten błąd i wyrywałem sobie włosy, ponieważ powodował niepowodzenie moich kompilacji TFS. Skomentowanie trasy „/” również rozwiązało problem. Teraz, aby dowiedzieć się, dlaczego!

Phillip Copley

3

Jeśli jesteś w module podrzędnym, nie zapomnij zadeklarować modułu w głównej aplikacji. tj .:

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

Jeśli nie zadeklarujesz subModule1 w mainApp, otrzymasz argument "[ng: areq]" MyController "nie jest funkcją, został zdefiniowany.

syjust
źródło

2

Drugim punktem Уmeda była moja pułapka, ale tak dla porządku, może to gdzieś pomaga:

Miałem ten sam problem i tuż przed tym, jak oszalałem, odkryłem, że zapomniałem dołączyć skrypt kontrolera.

Ponieważ moja aplikacja jest oparta na ASP.Net MVC, postanowiłem zachować rozsądek, wstawiając następujący fragment kodu do mojego App_Start / BundleConfig.cs

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

oraz w Layout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

Teraz już nigdy więcej nie będę musiał myśleć o ręcznym dołączaniu plików. Z perspektywy czasu naprawdę powinienem był to zrobić podczas przygotowywania projektu ...

Xceno
źródło

1

Otrzymałem rozsądny błąd z LoginController, którego użyłem w głównym pliku index.html. Znalazłem dwa sposoby rozwiązania:

ustawiając $ controllerProvider.allowGlobals (), znalazłem ten komentarz w liście zmian Angular "ta opcja może być przydatna do migracji starych aplikacji, ale nie używaj jej w nowych!" oryginalny komentarz do Angular

app.config (['$ controllerProvider', function ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
zły konstruktor rejestrującego kontrolera

przed

LoginController.$inject = ['$rootScope', '$scope', '$location'];

teraz

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

„app” pochodzi z pliku app.js

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

Dmitri Algazin
źródło

1

Miałem ten sam błąd z dużym błędem:

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

Zobaczysz ? zapomniałem '' wokół pierwszego zakresu $, prawidłowa składnia to oczywiście:

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

Pierwszy błąd, którego nie widziałem od razu, to: „ $ scope nie jest zdefiniowany ”, po którym następuje „ Błąd: [ng: areq] Argument 'TreeEditStepControlsCtrl' nie jest funkcją, jest niezdefiniowany ”

Elo
źródło

0

Czy mogłoby to być tak proste, jak umieszczenie aktywów w „” i cokolwiek wymaga cudzysłowu w środku z „”?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

staje się

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

Może to powodować problemy z analizowaniem

Jay Tom
źródło

0

Aby rozwiązać ten problem, musiałem odkryć, że błędnie wpisałem nazwę kontrolera w deklaracji tras Angular:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

MadPhysicist
źródło

0

W moim przypadku była to prosta literówka w index.html:

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

to powinno być

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

bez dodatku sw nazwie kontrolera.

Wir
źródło

0

Okazuje się, że jest to pamięć podręczna przeglądarki, używając tutaj Chrome. Po prostu zaznacz opcję „Wyłącz pamięć podręczną” w obszarze Sprawdź (element), aby rozwiązać mój problem.

Weihui Guo
źródło

0

Ponieważ ten komunikat pojawia się w Google podczas próby znalezienia odpowiedzi na: „Błąd: Argument” nie jest funkcją, została zdefiniowana ”.

Możliwe, że próbujesz dwukrotnie utworzyć ten sam moduł.

Angular.module to globalne miejsce do tworzenia, rejestrowania i pobierania modułów AngularJS.

Przekazanie jednego argumentu powoduje pobranie istniejącego kąta. Moduł, natomiast przekazanie więcej niż jednego argumentu tworzy nowy kąt.

Źródło: https://docs.angularjs.org/api/ng/function/angular.module#overview

Przykład:

angular.module('myApp', []) Służy do tworzenia modułu bez wprowadzania żadnych zależności.

angular.module('myApp') (Bez argumentu) służy do pobrania istniejącego modułu.

MCollard
źródło

0

Wydaje się, że istnieje wiele działających rozwiązań sugerujących, że błąd ma wiele rzeczywistych przyczyn .

W moim przypadku nie zadeklarowałem administratora w app/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

Błąd zniknął.

Ty Conway
źródło

Błąd: argument nie jest funkcją, został zdefiniowany

Odpowiedzi: