AngularJS error: TypeError: v2.login is not a function
AngularJS error: TypeError: v2.login is not a function
我想在单击登录按钮时调用登录功能,但标题中一直显示错误消息。有人可以指出我脚本中的错误吗?
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>
login.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>
要从视图中调用,函数必须在 $scope 中。添加
$scope.login = login;
到控制器的JS代码。
您还需要实际使用该控制器。变化
<div class="container" style="max-width: 300px">
到
<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">
这些都是基本的东西。我的建议是在进一步学习之前学习 AngularJS 教程。
两个启用双向绑定,您必须将登录功能分配给 $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);
}
});
}
在 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>
这里是边缘案例,但为了后代,我想提一下。当使用具有与 ng-submit
相同值的形式 name
的 controllerAs 模式时,我遇到了同样的错误。例如:
<form name="authCtrl.signUp" ng-submit="authCtrl.signUp()">
抛出:TypeError:v2.signUp 不是函数
解决方案是将表单名称更改为不同的名称:
<form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()">
我可能回答晚了。
但它对我有用
检查您设置的表格名称
例如ng-形式="login"
和函数名
例如ng-点击="login()"
那就不行了。你必须改变其中之一。
例如ng-形式="loginForm"
这可能不是您的问题所特有的,但我也遇到了这个错误,我花了一些时间才弄清楚原因。
我将一个函数和一个变量命名为相同的名称,并在函数中分配了变量,因此变量的分配覆盖了函数并且它在第二个 运行 上爆炸了。 =11=]
您会注意到示例中的 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'];
})();
就我而言,我遇到的问题与您的完全相同。然而,遇到 gkalpak's answer 这种情况帮助了我。
原来我调用的是 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>
...成功了! :)
解释:
AngularJS 1.x 通过 [=] 注册在 $scope
中具有 name
属性 的任何 form
DOM 元素13=]。如果以上条件成立,该指令会自动实例化 form.FormController
:
If the name
attribute is specified, the form controller is published onto the current scope under
来自:angular.js:24855
因此,如果您有 <form name=myForm>
,它将覆盖您的 $scope.myForm = function() { ... }
我想在单击登录按钮时调用登录功能,但标题中一直显示错误消息。有人可以指出我脚本中的错误吗?
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>
login.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>
要从视图中调用,函数必须在 $scope 中。添加
$scope.login = login;
到控制器的JS代码。
您还需要实际使用该控制器。变化
<div class="container" style="max-width: 300px">
到
<div ng-controller="AuthCtrl" class="container" style="max-width: 300px">
这些都是基本的东西。我的建议是在进一步学习之前学习 AngularJS 教程。
两个启用双向绑定,您必须将登录功能分配给 $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);
}
});
}
在 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>
这里是边缘案例,但为了后代,我想提一下。当使用具有与 ng-submit
相同值的形式 name
的 controllerAs 模式时,我遇到了同样的错误。例如:
<form name="authCtrl.signUp" ng-submit="authCtrl.signUp()">
抛出:TypeError:v2.signUp 不是函数
解决方案是将表单名称更改为不同的名称:
<form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()">
我可能回答晚了。 但它对我有用
检查您设置的表格名称 例如ng-形式="login"
和函数名 例如ng-点击="login()"
那就不行了。你必须改变其中之一。 例如ng-形式="loginForm"
这可能不是您的问题所特有的,但我也遇到了这个错误,我花了一些时间才弄清楚原因。
我将一个函数和一个变量命名为相同的名称,并在函数中分配了变量,因此变量的分配覆盖了函数并且它在第二个 运行 上爆炸了。 =11=]
您会注意到示例中的 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'];
})();
就我而言,我遇到的问题与您的完全相同。然而,遇到 gkalpak's answer 这种情况帮助了我。
原来我调用的是 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>
...成功了! :)
解释:
AngularJS 1.x 通过 [=] 注册在 $scope
中具有 name
属性 的任何 form
DOM 元素13=]。如果以上条件成立,该指令会自动实例化 form.FormController
:
If the
name
attribute is specified, the form controller is published onto the current scope under
来自:angular.js:24855
因此,如果您有 <form name=myForm>
,它将覆盖您的 $scope.myForm = function() { ... }