Ошибка AngularJS: TypeError: v2.login не является функцией

Я хотел бы вызвать функцию входа в систему, когда я нажимаю кнопку входа, но продолжаю получать сообщение об ошибке в заголовке. Может ли кто-нибудь указать ошибку в моем script?

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

Ответ 1

В моем случае у меня была точно такая же проблема, как и у вас. Однако натолкнувшись на гкалпак, ответ на такой сценарий выручил меня.

Оказалось, что я вызывал функцию addBuddy() из формы с именем "addBuddy". Решение состояло в том, чтобы изменить название любой из двух вещей, чтобы выделить одно или отличить его от другого. Я изменил название формы на "addBuddyForm" и вуаля! Моя функция сработала!

Вот фрагмент моего случая:

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

Который я изменил на:

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

... и это сработало! :)

Ответ 2

Случай с краем здесь, но я хочу упомянуть его для потомков. Я получил ту же ошибку при использовании шаблона controllerAs с формой name с тем же значением, что и ng-submit. Например:

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

Throws: TypeError: v2.signUp не является функцией

Решение заключалось в том, чтобы изменить имя формы на что-то другое:

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

Ответ 3

В AngularJS вызов функции из представления должен быть в области $scope.

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

Ответ 4

Это может быть не характерно для вашей проблемы, но я также получаю эту ошибку, и нам нужно немного понять, почему.

Я назвал как функцию, так и переменную той же, с переменной, назначенной в функции, и поэтому назначение переменной было переопределением функции, и она была взрывающейся во втором прогоне.

В примере вы увидите функцию uploadFile() как upload.uploadFile = true; Это был замечательный файл, который должен был быть upload.uploadingFile - флаг, используемый для управления поведением счетчика. Как только это было исправлено, проблема исчезла.

Пример:

(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'];
})();

Ответ 5

Чтобы быть вызываемым из представления, функция должна находиться в области $scope. Добавить

$scope.login = login;

к JS-коду контроллера.

Вам также необходимо использовать этот контроллер. Изменение

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

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

Это все фундаментальные вещи. Моим советом было бы изучить уроки AngularJS, прежде чем идти дальше.

Ответ 6

Два разрешения двусторонней привязки должны назначить вашу функцию входа в $scope. Замените свой код для функции следующим:

$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);
            }
        });
    }

Ответ 7

Это может быть поздний ответ. Но это работает для меня

Проверить имя формы, которую вы установили например. нг-форма = "войти в систему"

и имя функции например. нг-клик = "логин()"

Тогда это не сработает. Вы должны изменить один из них. например. нг-форма = "LoginForm"

Ответ 8

Объяснение:

AngularJS 1.x регистрирует любой элемент DOM form который имеет свойство name в $scope через formDirectiveFactory. Эта директива автоматически создает экземпляр form.FormController если вышеприведенное верно:

Если указан атрибут name, контроллер формы публикуется в текущей области под

от: angular.js: 24855

Следовательно, если у вас есть <form name=myForm> он переопределит ваш $scope.myForm = function() {... }