webentwicklung-frage-antwort-db.com.de

AngularJS-Fehler: TypeError: v2.login ist keine Funktion

Ich möchte die Anmeldefunktion aufrufen, wenn ich auf die Anmeldeschaltfläche klicke, aber weiterhin die Fehlermeldung im Titel erhalte. Kann jemand auf den Fehler in meinem Skript hinweisen?

login.js Code unten:

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

Und der Code für login.html ist auch unten:

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

In meinem Fall hatte ich genau dasselbe Problem wie bei Ihnen. Es hat mir jedoch geholfen, gkalpaks Antwort auf ein solches Szenario zu stoßen.

Es stellte sich heraus, dass ich die Funktion addBuddy () aus einem Formular namens "addBuddy" aufgerufen hatte. Die Lösung bestand darin, den Namen einer der beiden Dinge zu ändern, um sie hervorzuheben oder von der anderen zu unterscheiden. Ich habe den Namen des Formulars in "addBuddyForm" und voila geändert! Meine Funktion hat funktioniert!

Hier ist ein Ausschnitt aus meinem Fall:

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

Was ich geändert habe:

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

...und es hat funktioniert! :)

12
r0u9hn3ck

Randfall hier, aber ich möchte es der Nachwelt zuliebe erwähnen. Ich habe den gleichen Fehler erhalten, als ich das controllerAs-Muster mit einem Formular name mit dem gleichen Wert wie ng-submit Verwendet habe. Beispielsweise:

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

Wirft: TypeError: v2.signUp ist keine Funktion

Die Lösung bestand darin, den Namen des Formulars in etwas anderes zu ändern:

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

65
Aaron Gray

Rufen Sie in AngularJS die Funktion from view auf, sie muss im Bereich $ liegen.

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

Dies ist möglicherweise nicht spezifisch für Ihr Problem, aber ich habe auch diesen Fehler erhalten und es hat ein bisschen gedauert, um herauszufinden, warum.

Ich hatte sowohl eine Funktion als auch eine Variable gleich benannt, wobei die Variable in der Funktion zugewiesen war. Die Zuweisung der Variablen setzte die Funktion außer Kraft und explodierte bei einem zweiten Lauf.

Sie werden im Beispiel feststellen, dass uploadFile () als upload.uploadFile = true fungiert. Dies war eine wundervolle Datei, die als upload.uploadingFile gedacht war - ein Flag, mit dem das Verhalten eines Spinners gesteuert wird. Sobald dies behoben war, verschwand das Problem.

Beispiel:

(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

Um von der Ansicht aus aufgerufen werden zu können, muss sich eine Funktion im Bereich $ befinden. Hinzufügen

$scope.login = login;

zum JS-Code des Controllers.

Sie müssen diesen Controller auch tatsächlich verwenden. Veränderung

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

zu

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

Das ist alles grundlegendes Zeug. Mein Rat wäre, aus einem AngularJS-Tutorial zu lernen, bevor ich weitermache.

5
JB Nizet

Zwei aktivieren die bidirektionale Bindung Sie müssen Ihre Anmeldefunktion $ scope zuweisen. Ersetzen Sie Ihren Funktionscode durch Folgendes:

$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

Es kann eine späte Antwort von mir sein. Aber es funktioniert bei mir

Überprüfen Sie den von Ihnen festgelegten Formularnamen z. B. ng-form = "login"

und Funktionsname z. B. ng-click = "login ()"

Dann wird es nicht funktionieren. Sie müssen einen von ihnen ändern. z. B. ng-form = "loginForm"

3
Pooja-G

Erläuterung:

AngularJS 1.x registriert jedes form DOM-Element, das eine name -Eigenschaft in $scope Hat, über formDirectiveFactory. Diese Anweisung instanziiert automatisch form.FormController, Wenn das oben Gesagte zutrifft:

Wenn das Attribut name angegeben ist, wird der Formularcontroller im aktuellen Bereich unter veröffentlicht

from: angular.js: 24855

Wenn Sie also einen <form name=myForm> Haben, wird Ihr $scope.myForm = function() { ... } überschrieben.

0
Șerban Ghiță