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

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

Respostas: