Erro: o argumento não é uma função, foi indefinido

120

Usando o AngularJS com o Scala Play, estou recebendo esse erro.

Erro: o argumento 'MainCtrl' não é uma função, foi indefinido

Estou tentando criar uma tabela composta pelos dias da semana.

Por favor, dê uma olhada no meu código. Eu verifiquei o nome do controlador, mas isso parece correto. Nota: Código usado nesta resposta do 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
fonte

15

Em html onde você usou ng-appvocê pode alterá-lo parang-app=myApp

— Chandermani

Tenho o mesmo erro @Chandermani

— Kevin Meredith

Você tentou remover o fechamento (IIFE) do código? Quando tive esse problema, foi porque havia um erro de PHP no meu javascript.

— Kevin Beal

1

Você pode descobrir o seu problema, por esta lista de verificação: stackoverflow.com/a/26797874/930170

— Sergei Panfilov

Confirme se você adicionou MainCtrl.controller.js ao arquivo BundleConfig.cs

— Syed Mohamed

107

Remova o []do nome ([myApp]) do módulo

angular.module('myApp', [])

E adicione ng-app="myApp"ao html e deve funcionar.

— Chandermani
fonte

1

Tudo o que eu precisava fazer para funcionar era a segunda sugestão (ou seja, configure ng-app = "myApp"). Se eu removi o [], recebi outro erro.

— Jason

15

Ter o segundo parâmetro []indica que você está criando um novo módulo. A remoção do segundo parâmetro indica que você está recuperando um módulo existente. Portanto, uma possibilidade de verificar é se você está chamando angular.moduleduas vezes, incluindo o segundo parâmetro. Nesse caso, a ocorrência posterior substituirá a segunda, ocultando quaisquer definições de controladores até esse ponto.

— 22713 Carl Carl G

26

Quando ele diz para remover o []que ele está se referindo ao primeiro parâmetro onde o OP tem [myApp]em vez de myApp. Ele não está falando sobre o segundo parâmetro.

— Kevin Beal

1

Verifique o nome do seu controlador se você estiver usando rotas. O nome do controlador na definição de rota faz distinção entre maiúsculas e minúsculas.

— Latin Warrior

78

PRIMEIRO. verifique se você está correto controllernas definições de rota, o mesmo que os nomes dos controladores que você está definindo

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';
    }]);

nomes de controladores diferentes neste exemplo levarão a erros, mas este exemplo está correto

SEGUNDO, verifique se você importou seu arquivo javascript:

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

— pleerock
fonte

30

Na minha experiência, seu "segundo" é sempre o problema. Costumo esquecer de importar meus controladores paraindex.html

— msanford

Foi o segundo no meu caso também, esqueci de importar o arquivo JS ...

— Saurabh Misra

26

Eu tive a mesma mensagem de erro (no meu caso: "O argumento 'languageSelectorCtrl' não é uma função, ficou indefinido").

Após uma comparação tediosa com o código da semente Angular, descobri que havia anteriormente removido uma referência ao módulo de controladores no app.js. (localize-o em https://github.com/angular/angular-seed/blob/master/app/js/app.js )

Então eu tive isso:

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

Isso falhou.

E quando adicionei a referência ausente:

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

A mensagem de erro desapareceu e o Angular pode instanciar os controladores novamente.

— Bertrand
fonte

teve o mesmo problema, meu problema foi que esqueci de adicionar meu controlador ao módulo de aplicativo ... por que isso não acontece automaticamente ??? obrigado de qualquer maneira!

— TheZuck

16

Algumas vezes, esse erro é resultado de duas ng-app diretivas especificadas no html. No meu caso, por engano, eu especifiquei ng-appna minha htmltag e ng-app="myApp"na bodytag assim:

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

— Gaurav
fonte

1

Aconteceu comigo quando eu não adicionei a injeção no módulo myApp.

— Ghandhikus

Obrigado! Isso corrigiu meu problema.

— 22716 Bradden_gross

6

Isso levou-me a sério 4 HORAS (incluindo pesquisas intermináveis no SO), mas finalmente encontrei: por engano (sem querer), adicionei um espaço em algum lugar.

Você consegue identificar?

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

Então ... 4 horas depois, vi que deveria ser:

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

Quase impossível de ver apenas a olho nu.

Isso enfatiza a importância vital do controle de revisão (git ou qualquer outra coisa) e dos testes de unidade / regressão.

— leo
fonte

1

Minha resposta não foi um espaço extra, mas me levou à minha solução. Eu tinha em Controllervez disso controllere foi tudo o que foi preciso.

— Grandizer 26/10/2015

E nomeei meu arquivo de opções-moda.controller.js, mas estava procurando por opções-modal.controller.js DOH!

— theFish 23/10

O meu foi por causa de eu esqueci de adicionar .js no BundleConfig. Simples, mas frustrante.

— Ege Bayrak

4

Eu encontrei o mesmo problema e, no meu caso, estava acontecendo como resultado desse problema:

Eu tinha os controladores definidos em um módulo separado (chamado 'myApp.controllers') e injetado no módulo principal do aplicativo (chamado 'myApp') assim:

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

Um colega enviou outro módulo do controlador em um arquivo separado, mas com exatamente o mesmo nome que o meu (por exemplo, 'myApp.controllers') que causou esse erro. Eu acho que porque o Angular ficou confuso entre esses módulos do controlador. No entanto, a mensagem de erro não foi muito útil para descobrir o que está acontecendo de errado.

— Lilla Eli
fonte

1

Isso deve ser corrigido removendo o segundo parâmetro no módulo ... Para obter o módulo existente usando angular.module ('myApp') sem o segundo parâmetro. ou seja, angular.module ('myApp'). contoller (...)

— Santhosh

3

No meu caso (com uma página de visão geral e uma página "adicionar"), compreendi isso com minha configuração de roteamento, como abaixo. Estava dando a mensagem para o AddCtrl que não pôde ser injetado ...

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

Por causa da when('/'rota, todas as minhas rotas foram para a visão geral e o controlador não pôde ser correspondido na renderização de página de rota / add. Isso foi confuso porque eu vi o modelo add.html, mas seu controlador não estava em lugar nenhum.

A remoção da rota '/' - quando o caso corrigiu esse problema para mim.

— EeKay
fonte

Eu também estava recebendo esse erro e arrancando os cabelos porque estava causando falhas nas compilações do TFS. Comentar a rota '/' também a corrigiu. Agora, para descobrir o porquê!

— Phillip Copley

3

Se você estiver em um submódulo, não se esqueça de declarar o módulo no aplicativo principal. ou seja:

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

Se você não declarar subModule1 no mainApp, receberá um argumento "[ng: areq]" MyController "não é uma função, ficará indefinido.

— justo
fonte

2

O segundo ponto de Уmed foi minha armadilha, mas apenas para constar, talvez esteja ajudando alguém em algum lugar:

Eu tinha o mesmo problema e, pouco antes de enlouquecer, descobri que havia esquecido de incluir meu script de controlador.

Como meu aplicativo é baseado no ASP.Net MVC, decidi me manter saudável, inserindo o seguinte trecho no meu App_Start / BundleConfig.cs

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

e no Layout.cshtml

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

Agora não precisarei pensar em incluir os arquivos manualmente novamente. Em retrospectiva, eu realmente deveria ter feito isso ao configurar o projeto ...

— Xceno
fonte

1

Eu obtive um erro sensato com o LoginController, que usei no principal index.html. Encontrei duas maneiras de resolver:

definindo $ controllerProvider.allowGlobals (), descobri que, na lista de alterações angular , "essa opção pode ser útil para a migração de aplicativos antigos, mas não use em novos!" comentário original sobre Angular

app.config (['$ controllerProvider', função ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);
contratador errado do controlador de registro

antes

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

agora

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

'app' vem de app.js

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

— Dmitri Algazin
fonte

1

Eu tive o mesmo erro com um grande erro:

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

}]);

Entende ? esqueci o '' em torno do primeiro escopo $, a sintaxe correta é claro:

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

}]);

Um primeiro erro que não vi imediatamente foi: " $ scope is not defined ", seguido por " Error: [ng: areq] O argumento 'TreeEditStepControlsCtrl' não é uma função, ficou indefinido "

— Elo
fonte

0

Poderia ser tão simples quanto colocar seu ativo em "" e o que precisar de aspas por dentro com ''?

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

torna-se

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

Isso pode estar causando alguns problemas com a análise

— Jay Tom
fonte

0

Para corrigir esse problema, tive que descobrir que escrevia incorretamente o nome do controlador na declaração de rotas angulares:

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

— MadPhysicist
fonte

0

No meu caso, foi um erro de digitação simples em index.html:

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

isso deveria ter sido

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

sem o extra sno nome do controlador.

— Eddy
fonte

0

Acontece que é o cache do navegador, usando o Chrome aqui. Basta verificar o "Desativar cache" em Inspecionar (elemento) resolvido meu problema.

— Weihui Guo
fonte

0

Porque isso aparece no Google ao tentar encontrar uma resposta para: "Erro: argumento '' não é uma função, ficou indefinido".

É possível que você esteja tentando criar o mesmo módulo duas vezes.

O angular.module é um local global para criar, registrar e recuperar módulos AngularJS.

Passar um argumento recupera um angular.Module existente, enquanto passar mais de um argumento cria um novo angular.Module

Fonte: https://docs.angularjs.org/api/ng/function/angular.module#overview

Exemplo:

angular.module('myApp', []) É usado para criar um módulo sem injetar nenhuma dependência.

angular.module('myApp') (Sem argumento) é usado para obter um módulo existente.

— MCollard
fonte

0

Parece haver muitas soluções de trabalho sugerindo que o erro tem muitas causas reais .

No meu caso, não havia declarado o controlador em app/index.html:

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

Erro desaparecido.

— Ty Conway
fonte