javascript - true - w3schools angularjs directive




O controlador não é uma função, ficou indefinido, ao definir controladores globalmente (10)

Eu estou escrevendo um aplicativo de exemplo usando angularjs. Eu recebi um erro mencionado abaixo no navegador Chrome.

Erro é

Erro: [ng: areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined

Qual é o mais

Argumento 'ContactController' não é uma função, ficou indefinido

Código

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="../angular.min.js"></script>
    <script type="text/javascript">
        function ContactController($scope) {
            $scope.contacts = ["[email protected]", "[email protected]"];

            $scope.add = function() {
                $scope.contacts.push($scope.newcontact);
                $scope.newcontact = "";                 
            };
        }    
    </script>    
</head>

<body>    
    <h1>  modules sample </h1>

    <div ng-controller="ContactController">
        Email:<input type="text" ng-model="newcontact">
        <button ng-click="add()">Add</button>

        <h2> Contacts </h2>
        <ul>
            <li ng-repeat="contact in contacts"> {{contact}} </li>
        </ul>    
    </div>
</body> 
</html>

Acabei de migrar para o 1.3.3 angular e descobri que se eu tivesse vários controladores em arquivos diferentes quando o aplicativo é substituir e eu perdi os primeiros contêineres declarados.

Não sei se é uma boa prática, mas talvez possa ser útil para outra.

var app = app;
if(!app) {
    app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

Com o Angular 1.3+, você não pode mais usar a declaração de controlador global no escopo global (sem registro explícito). Você precisaria registrar o controlador usando a sintaxe module.controller .

Exemplo:-

angular.module('app', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

ou

function ContactController($scope) {
    $scope.contacts = ["[email protected]", "[email protected]"];

    $scope.add = function() {
        $scope.contacts.push($scope.newcontact);
        $scope.newcontact = "";
    };
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);

É uma mudança allowGlobals mas pode ser desativada para usar globals usando allowGlobals .

Exemplo:-

angular.module('app')
    .config(['$controllerProvider', function($controllerProvider) {
        $controllerProvider.allowGlobals();
    }]);

Aqui está o comentário da fonte Angular: -

  • verifique se um controlador com nome próprio está registrado via $controllerProvider
  • verifique se a avaliação da cadeia no escopo atual retorna um construtor
  • se $ controllerProvider # allowGlobals, verifique a window[constructor] no objeto da window global (não recomendado)
 .....

expression = controllers.hasOwnProperty(constructor)
            ? controllers[constructor]
            : getter(locals.$scope, constructor, true) ||
                (globals ? getter($window, constructor, true) : undefined);

Algumas verificações adicionais:

  • Certifique-se de colocar o nome ng-app na diretiva ng-app em seu elemento raiz angular (por exemplo: - html ) também. Exemplo: - ng-app = "myApp"

  • Se tudo estiver bem e você ainda estiver recebendo o problema, lembre-se de ter o arquivo correto incluído nos scripts.

  • Você não definiu o mesmo módulo duas vezes em locais diferentes, o que resulta em quaisquer entidades definidas anteriormente no mesmo módulo a serem limpas, Exemplo: angular.module('app',[]).controller(.. e novamente em outro local angular.module('app',[]).service(.. (com ambos os scripts incluídos, é claro) pode fazer com que o controlador registrado anteriormente no app do módulo seja limpo com a segunda recriação do módulo.


Esses erros ocorreram, no meu caso, precedidos por erros de sintaxe em list.find () fuction; 'find' método de uma lista não reconhecida pelo IE11, então tem que substituir pelo método Filter, que funciona tanto para IE11 e cromo. consulte https://github.com/flrs/visavail/issues/19


Este erro, no meu caso, foi precedido por erro de sintaxe no método find de uma lista no IE11. então substituiu o método find pelo método filter como sugerido https://github.com/flrs/visavail/issues/19

então acima do controlador não definido erro resolvido.


Eu recebi o mesmo erro ao seguir um tutorial antigo com (não o suficiente) AngularJS 1.4.3. De longe, a solução mais simples é editar a fonte angular.js

function $ControllerProvider() {
  var controllers = {},
      globals = false;

para

function $ControllerProvider() {
  var controllers = {},
      globals = true;

e apenas siga o tutorial como está, e as funções globais obsoletas funcionam apenas como controladores.


Eu sou um iniciante no Angular e cometi o erro básico de não incluir o nome do aplicativo no elemento raiz angular. Então, mudando o código de

<html data-ng-app> 

para

<html data-ng-app="myApp"> 

trabalhou para mim. @PSL, já cobriu isso em sua resposta acima.


Eu tive esse erro porque eu não entendi a diferença entre angular.module('myApp', []) e angular.module('myApp') .

Isso cria o módulo 'myApp' e sobrescreve qualquer módulo existente chamado 'myApp':

angular.module('myApp', [])

Isso recupera um módulo existente 'myApp':

angular.module('myApp')

Eu estava sobrescrevendo meu módulo em outro arquivo, usando a primeira chamada acima que criou outro módulo em vez de recuperar como eu esperava.

Mais detalhes aqui: https://docs.angularjs.org/guide/module


Eu tive esse problema quando acidentalmente redeclarou myApp :

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);

var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);

Após o redeclare, o Controller1 pára de funcionar e gera o erro OP.


Se tudo mais falhar e você estiver usando Gulp ou algo similar ... apenas execute novamente!

Eu perdi 30mins quádruplo verificando tudo quando tudo o que precisava era um chute rápido nas calças.


Se você estiver usando rotas (alta probabilidade) e sua configuração tiver uma referência a um controlador em um módulo que não esteja declarado como dependência, a inicialização poderá falhar também.

Por exemplo, supondo que você tenha configurado ngRoute para o seu aplicativo, como

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Tenha cuidado no bloco que declara as rotas,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Declare secondModule como uma dependência depois de 'ngRoute' resolver o problema. Eu sei que tive esse problema.