angularjs - google - login with firebase angular 6
Error de AngularJS: TypeError: v2.login no es una función (7)
Caso de Edge aquí, pero quiero mencionarlo por el bien de las posteridades. Recibí este mismo error al usar el patrón controllerAs con un name formulario con el mismo valor que ng-submit . Por ejemplo:
<form name="authCtrl.signUp" ng-submit="authCtrl.signUp()">
Emite: TypeError: v2.signUp no es una función
La solución fue cambiar el nombre del formulario a algo diferente:
<form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()">
Me gustaría llamar a la función de inicio de sesión cuando hago clic en el botón de inicio de sesión pero el mensaje de error sigue apareciendo. ¿Alguien puede señalar el error en mi script?
código de login.js abajo:
/*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>
Y el código para login.html también está abajo:
<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>
Dos habilitar enlace bidireccional tiene que asignar su función de inicio de sesión a $ scope. Reemplace su código para la función con esto:
$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);
}
});
}
En AngularJS, llamar a la función desde la vista, debe estar en el $ 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>
En mi caso, estaba teniendo exactamente el mismo problema que el tuyo. Sin embargo, encontrar la respuesta de Gkalpak a tal escenario me ayudó.
Resultó ser lo que estaba llamando era la función addBuddy (), de un formulario llamado "addBuddy". La solución fue cambiar el nombre de cualquiera de las dos cosas para hacer que una sobresalga o se diferencie de la otra. Cambié el nombre del formulario a "addBuddyForm" y ¡voilá! ¡Mi función funcionó!
Aquí hay un fragmento de mi caso:
<form name="addBuddy" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>
Que, cambié a:
<form name="addBuddyForm" class="form-horizontal" novalidate>
...
<button class="btn btn-sm btn-info" ng-click="addBuddy()>Submit</button>
...¡Y funcionó! :)
Para poder llamarse desde la vista, una función debe estar en el $ scope. Añadir
$scope.login = login;
al código JS del controlador.
También necesitas usar ese controlador. Cambio
<div class="container" style="max-width: 300px">
a
<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">
Esto es todo lo fundamental. Mi consejo sería aprender de un tutorial de AngularJS antes de continuar.
Puede que esto no sea específico para su problema, pero también recibí este error y me costó un poco descubrir por qué.
Yo había nombrado una función y una variable iguales, con la variable asignada en la función, por lo que la asignación de la variable estaba anulando la función y estaba explotando en una segunda ejecución.
Notarás en el ejemplo la función uploadFile () como upload.uploadFile = true; Este fue un archivo maravilloso destinado para ser cargado en un archivo de carga: una bandera que se usa para controlar el comportamiento de un hilandero. Una vez que se solucionó, el problema desapareció.
Ejemplo:
(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''];
})();
Puede ser una respuesta tardía de mi parte. Pero funciona para mi
Verifique el nombre del formulario que estableció, por ejemplo, ng-form = "login"
y el nombre de la función, por ejemplo, ng-click = "login ()"
Entonces no funcionará. Tienes que cambiar uno de ellos. por ejemplo, ng-form = "loginForm"