web-dev-qa-db-fra.com

Erreur AngularJS: TypeError: v2.login n'est pas une fonction

Je voudrais appeler la fonction de connexion lorsque je clique sur le bouton de connexion, mais je reçois toujours le message d'erreur dans le titre. Quelqu'un peut-il signaler l'erreur dans mon script?

code login.js ci-dessous:

/*global Firebase, angular, console*/

'use strict';
// Create a new app with the AngularFire module
var app = angular.module("runsheetApp");

app.controller("AuthCtrl", function ($scope, $firebaseAuth) {
    var ref = new Firebase("https://xxxxx.firebaseio.com");
    function login() {
        ref.authWithPassword({
            email    : "xxxxx",
            password : "xxxx"
        }, function (error, authData) {
            if (error) {
                console.log("Login Failed!", error);
            } else {
                console.log("Authenticated successfully with payload:", authData);
            }
        });
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>

Et le code pour login.html est également ci-dessous:

<div class="container" style="max-width: 300px">
    <form class="form-signin">       
      <h2 class="form-signin-heading" style="text-align: center">Please Sign In</h2>
      <input type="text" class="form-control" name="username" ng-model = "username" placeholder="Email Address" required="" autofocus="" />
        </br>
      <input type="password" class="form-control" name="password" ng-model = "password" placeholder="Password" required=""/>
        </br>
      <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="login()">Login</button>   
    </form>
  </div>
angularjsfirebaseangularjs-ng-clickfirebase-authentication
20
Nick

Dans mon cas, j'avais exactement le même problème que le vôtre. Cependant, rencontrer réponse de gkalpak à un tel scénario m'a aidé.

Il s'est avéré que ce que j'appelais était la fonction addBuddy (), à partir d'un formulaire nommé "addBuddy". La solution était de changer le nom de l'une ou l'autre des deux choses pour que l'une se démarque ou se différencie de l'autre. J'ai changé le nom du formulaire en "addBuddyForm" et le tour est joué! Ma fonction a fonctionné!

Voici un extrait de mon cas:

<form name="addBuddy" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>

Ce que j'ai changé en:

<form name="addBuddyForm" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>

... et ça a marché! :)

12
r0u9hn3ck

Affaire Edge ici, mais je veux le mentionner pour le bien des postérité. J'ai eu cette même erreur lors de l'utilisation du modèle controllerAs avec un formulaire name avec la même valeur que ng-submit. Par exemple:

<form name="authCtrl.signUp" ng-submit="authCtrl.signUp()">

Jette: TypeError: v2.signUp n'est pas une fonction

La solution était de changer le nom du formulaire pour quelque chose de différent:

<form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()">

65
Aaron Gray

Dans AngularJS, appelez la fonction vue, elle doit être dans la portée $.

JS 

// exposes login function in scope
$scope.login = login;

HTML 

<div class="container" ng-controller="AuthCtrl" style="max-width: 300px"> <!-- I notice here for include ng-controller to your main div -->
<form class="form-signin">       
  <h2 class="form-signin-heading" style="text-align: center">Please Sign In</h2>
  <input type="text" class="form-control" name="username" ng-model = "username" placeholder="Email Address" required="" autofocus="" />
    </br>
  <input type="password" class="form-control" name="password" ng-model = "password" placeholder="Password" required=""/>
    </br>
  <button class="btn btn-lg btn-primary btn-block" type="submit" ng-click="login()">Login</button>   
</form>
11
Anandhan Suruli

Ce n'est peut-être pas spécifique à votre problème, mais je recevais également cette erreur et il a fallu un peu pour comprendre pourquoi.

J'avais nommé à la fois une fonction et une variable de la même manière, avec la variable affectée dans la fonction, et donc l'affectation de la variable remplaçait la fonction et explosait lors d'une deuxième exécution.

Vous remarquerez dans l'exemple la fonction uploadFile () comme upload.uploadFile = true; C'était un merveilleux fichier qui devait être upload.uploadingFile - un indicateur utilisé pour contrôler le comportement d'un spinner. Une fois que cela a été résolu, le problème a disparu.

Exemple:

(function()
{
  'use strict';

  angular.module('aumApp.file-upload')
  .controller('FileUploadCtrl', FileUploadCtrl);

  function FileUploadCtrl($scope, $http)
  {
    upload.uploadFile = function()
    {
      upload.uploadFile = true;
      var backendUrl = '/ua_aumcore/events/api/v1/events/uploadFile';
      var fd = new FormData();
      fd.append('file', upload.src);
      $http({ url: backendUrl, data: fd, method: 'POST', transformRequest : angular.identity, headers: { 'Content-Type' : undefined } })
      .then(function uploadSuccess(response)
      {
        upload.data = response.data;
        upload.message = "Uploaded Succesfully.";
        upload.uploadSuccess = true;
        upload.uploadingFile = false;
      },
      function uploadFailure(response)
      {
        upload.message = "Upload Failed.";
        upload.uploadSuccess = false;
        upload.uploadingFile = false;
      });
    };
  }
  FileUploadCtrl.$inject = ['$scope', '$http'];
})();
7
Andrew Karstaedt

Pour pouvoir être appelée à partir de la vue, une fonction doit être dans la portée $. Ajouter

$scope.login = login;

au code JS du contrôleur.

Vous devez également utiliser ce contrôleur. Changement

<div class="container" style="max-width: 300px">

à

<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">

Tout cela est fondamental. Mon conseil serait d'apprendre d'un tutoriel AngularJS avant d'aller plus loin.

5
JB Nizet

Deux permettent la liaison bidirectionnelle, vous devez affecter votre fonction de connexion à $ scope. Remplacez votre code de fonction par ceci:

$scope.login=function() {
        ref.authWithPassword({
            email    : "[email protected]",
            password : "Jaeger01"
        }, function (error, authData) {
            if (error) {
                console.log("Login Failed!", error);
            } else {
                console.log("Authenticated successfully with payload:", authData);
            }
        });
    }
4
Tomislav

C'est peut-être une réponse tardive de ma part. Mais ça marche pour moi

Vérifiez le nom du formulaire que vous avez défini par exemple, ng-form = "login"

et le nom de la fonction par exemple, ng-click = "login ()"

Ensuite, cela ne fonctionnera pas. Vous devez en changer un. par exemple, ng-form = "loginForm"

3
Pooja-G

Explication:

AngularJS 1.x enregistre tout élément DOM form qui a une propriété name dans $scope Via formDirectiveFactory. Cette directive instancie automatiquement form.FormController Si ce qui précède est vrai:

Si l'attribut name est spécifié, le contrôleur de formulaire est publié sur la portée actuelle sous

de: angular.js: 24855

Par conséquent, si vous avez un <form name=myForm>, Il remplacera votre $scope.myForm = function() { ... }

0
Șerban Ghiță