Ошибка AngularJS: TypeError: v2.Логин-это не функция.
Я хотел бы вызвать функцию login, когда я нажимаю кнопку login, но продолжаю получать сообщение об ошибке в заголовке. Может кто-нибудь указать на ошибку в моем сценарии?
Вход.код js ниже:
/*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>
И код для входа в систему.html также находится ниже:
<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>
7 ответов:
В моем случае у меня была точно такая же проблема, как и у вас. Однако, наткнувшись на ответ гкалпака на такой сценарий, я выручил себя.
Оказалось, что я вызывал функцию 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>
...и это сработало! :)
Крайний случай здесь, но я хочу упомянуть его для удобства. Я получил эту же ошибку при использовании шаблона controllerAs с формой
name
с тем же значением, что иng-submit
. Например:
<form name="authCtrl.signUp" ng-submit="authCtrl.signUp()">
Броски: TypeError: v2.регистрация-это не функция
Решение состояло в том, чтобы изменить название формы на что-то другое:
<form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()">
В AngularJS вызов функции из вида должен быть в $ scope.
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>
Возможно, это не относится конкретно к вашей проблеме, но я также получал эту ошибку, и мне потребовалось немного времени, чтобы понять, почему.
Я назвал и функцию, и переменную одинаково, с переменной, назначенной в функции, и поэтому назначение переменной переопределяло функцию, и она взрывалась при втором запуске.
Вы заметите в Примере функцию uploadFile () как upload.uploadFile = true; это был замечательный файл, который должен был быть загружен.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']; })();
Два включить двустороннюю привязку вы должны назначить свою функцию входа в $scope. Замените код функции следующим:
$scope.login=function() { ref.authWithPassword({ email : "nick.koulias@gmail.com", password : "Jaeger01" }, function (error, authData) { if (error) { console.log("Login Failed!", error); } else { console.log("Authenticated successfully with payload:", authData); } }); }
Чтобы быть вызываемой из представления, функция должна находиться в $ scope. Добавить
$scope.login = login;
К JS-коду контроллера.
Вам также необходимо использовать этот контроллер. Изменение
<div class="container" style="max-width: 300px">
К
<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">
Это все фундаментальные вещи. Мой совет был бы узнать из учебника AngularJS, прежде чем идти дальше.