AngularJS 错误：TypeError：v2.login 不是函数

Posted

技术标签:

【中文标题】AngularJS 错误：TypeError：v2.login 不是函数【英文标题】：AngularJS error: TypeError: v2.login is not a function 【发布时间】：2015-11-07 07:40:44 【问题描述】：

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

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>

【问题讨论】：

【参考方案1】：

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

&lt;form name="authCtrl.signUp" ng-submit="authCtrl.signUp()"&gt;

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

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

&lt;form name="authCtrl.signUpForm" ng-submit="authCtrl.signUp()"&gt;

【讨论】：

这绝对是我的问题的答案。它表明它并不总是“这都是基本的东西”的情况。谢谢。我不需要在我的元素上使用控制器，因为我使用的是指令。 这对我真的很有帮助，也正是我的问题，谢谢！ 我遇到了类似的问题，在将值分配给指令内的范围变量时出现此处描述的错误。更改指令中范围变量的名称解决了该问题。这让我觉得上面某个地方的父作用域已经为那个 $scope 变量分配了一个方法。 好吧，我想这毕竟不是极端情况...... ;-) 这是我的问题的答案。非常感谢。 :)【参考方案2】：

就我而言，我遇到了与您完全相同的问题。但是，遇到gkalpak's answer 这样的场景帮助了我。

原来我调用的是 addBuddy() 函数，来自一个名为“addBuddy”的表单。解决方案是更改这两种事物中的任何一种的名称，以使一种事物脱颖而出或与另一种事物区分开来。我将表单的名称更改为“addBuddyForm”，瞧！我的功能奏效了！

这是我的案例的 sn-p：

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

...它成功了！ :)

【讨论】：

就我而言，我有一个名为“addBuddy()”的函数。当我试图向用户显示“addBuddy()”的页面时，我还有一个布尔值，我正在设置“addBuddy = true”/“addBuddy = false”。 Angular 似乎对变量和函数进行了比较，以确保没有重叠。它将它们比较为 v1.VarFnName（作为字符串）！= v2.VarFnName。 function doComparison(v1, v2) for (var i = 0, ii = predicates.length; i &lt; ii; i++) var result = compare(v1.predicateValues[i], v2.predicateValues[i]);【参考方案3】：

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

【讨论】：

【参考方案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 教程中学习。

【讨论】：

嗨，JB，我也尝试过插入这行代码，但没有成功。我在登录功能内外都试过了，结果相同。【参考方案6】：

两个启用双向绑定，您必须将登录功能分配给 $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);
            
        );

【讨论】：

您好，Tomislav，感谢您的回复。我已经按照描述进行了尝试，但仍然收到相同的错误。 也许您的 HTML 中缺少 ng-controller 指令，或者您使用路由时没有为 login.html 声明控制器？ 像这样改变你的开头 div： 谢谢托米斯拉夫。最后，是 HTML 文件中的控制器声明导致了问题。我还按照建议将登录代码包装在一个函数中。完美运行！【参考方案7】：

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

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

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

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

【讨论】：

【参考方案8】：

解释：

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

如果指定了name属性，则表单控制器发布到当前作用域下

来自：angular.js:24855

因此，如果您有 &lt;form name=myForm&gt;，它将覆盖您的 $scope.myForm = function() ...

【讨论】：

以上是关于AngularJS 错误：TypeError：v2.login 不是函数的主要内容，如果未能解决你的问题，请参考以下文章

未捕获（承诺）：TypeError：无法读取未定义的属性“创建”（离子 3.9，Angularjs 5.0.3）

angularJS + mongoose：TypeError：无法读取未定义的属性“模型”

将顺风 v2 升级到 v3 类型错误：无法读取属性

Uncaught TypeError: undefined is not a function In AngularJS

AngularJS：无法读取未定义的属性'runner'

TypeError：dbg在angularjs中未定义