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




playframework (10)

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

Erro: Argumento 'MainCtrl' não é uma função, ficou indefinido

Estou tentando criar uma tabela que consiste nos dias da semana.

Por favor, dê uma olhada no meu código. Eu tinha verificado o nome do controlador, mas isso parece correto. Nota: Código utilizado a partir desta answer 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"]
        }
    });
}());

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


Algumas vezes esse erro é resultado de duas diretivas ng-app especificadas no html. No meu caso, por engano, eu tinha especificado ng-app na minha tag html e ng-app="myApp" na tag body como esta:

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

Eu tenho um erro sane com LoginController, que eu usei no principal index.html. Eu encontrei duas maneiras de resolver:

  1. definindo $ controllerProvider.allowGlobals (), eu encontrei esse comentário na change-list Angular "esta opção pode ser útil para migrar aplicativos antigos, mas por favor não use em novos!" comentário original sobre Angular

    app.config (['$ controllerProvider', função ($ controllerProvider) {$ controllerProvider.allowGlobals ();}]);

  2. construtor 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']);

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

Depois de uma comparação tediosa com o código da semente Angular, descobri que havia removido anteriormente uma referência ao módulo controllers em app.js. (veja 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 pôde instanciar os controladores novamente.


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

Você pode identificá-lo?

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

Então ... 4 horas depois eu 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 outro) e teste de unidade / regressão.


No meu caso (ter uma página de visão geral e uma página de "adicionar") eu tenho isso com a minha configuração de roteamento como abaixo. Foi 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 do when('/' route todas as minhas rotas foram para a visão geral e o controlador não pôde ser correspondido na renderização da página / add route. Isso foi confuso porque eu vi o template add.html, mas seu controlador estava longe de ser encontrado.

Removendo a rota '/' quando o caso resolveu esse problema para mim.


O segundo ponto de wasmed foi a minha armadilha, mas apenas para o registro, talvez esteja ajudando alguém em algum lugar:

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

Como meu aplicativo é baseado no ASP.Net MVC, decidi me manter sã 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 em Layout.cshtml

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

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


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

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

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

angular.module('myApp', [])

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


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

<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 em mainApp, você terá um argumento "[ng: areq]" MyController "não é uma função, ficou indefinido.





playframework