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