24

我想在单击登录按钮时调用登录功能，但标题中不断出现错误消息。有人可以指出我脚本中的错误吗？

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>

4

8 回答 8

66

这里的边缘案例，但我想为了后代的缘故提及它。name将 controllerAs 模式与具有相同值的表单一起使用时，我遇到了同样的错误ng-submit。例如：

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

抛出：TypeError：v2.signUp 不是函数

解决方案是将表单的名称更改为不同的名称：

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

于 2015-09-30T19:49:29.930 回答
20

就我而言，我遇到了与您完全相同的问题。但是，遇到gkalpak对这种情况的回答帮助了我。

原来我调用的是 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>

......它奏效了！:)

于 2017-10-16T11:06:41.757 回答
11

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

于 2015-08-14T07:05:16.363 回答
7

这可能不是您的问题所特有的，但我也遇到了这个错误，花了一点时间才弄清楚原因。

我将函数和变量都命名为相同的，在函数中分配了变量，因此变量的分配覆盖了函数，并且在第二次运行时爆炸。

您会在示例中注意到 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'];
})();
于 2016-08-02T13:44:25.087 回答
5

要从视图中调用，函数必须在 $scope 中。添加

$scope.login = login;

到控制器的JS代码。

您还需要实际使用该控制器。改变

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

到

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

这都是基本的东西。我的建议是在进一步学习之前从 AngularJS 教程中学习。

于 2015-08-14T06:21:40.343 回答
4

两个启用双向绑定，您必须将登录功能分配给 $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);
            }
        });
    }
于 2015-08-14T06:23:56.310 回答
4

这可能是我迟到的答案。但它对我有用

检查您设置的表单名称， 例如 ng-form="login"

和函数名称， 例如 ng-click="login()"

那么它就行不通了。你必须改变其中之一。 例如 ng-form="loginForm"

于 2015-11-02T12:09:09.297 回答
0

解释：

AngularJS 1.x 注册任何在viaform中具有name属性的DOM 元素。如果上述情况为真，该指令会自动实例化 ：$scopeformDirectiveFactoryform.FormController

如果name指定了属性，则表单控制器将发布到当前范围下

来自：angular.js:24855

因此，如果您有 a <form name=myForm>，它将覆盖您的$scope.myForm = function() { ... }

于 2019-05-13T08:46:55.650 回答