web-dev-qa-db-ja.com

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>

また、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>
20
Nick

私の場合、私はあなたとまったく同じ問題を抱えていました。しかし、そのようなシナリオに gkalpakの答え を見つけて助けてくれました。

「addBuddy」という名前のフォームから、私が呼び出していたのはaddBuddy()関数であることが判明しました。解決策は、2つの事柄のいずれかの名前を変更して、一方を目立たせるか、他方を区別できるようにすることでした。フォームの名前を「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>

...そしてそれはうまくいきました! :)

12
r0u9hn3ck

ここではエッジケースですが、後世のために言及したいと思います。 _ng-submit_と同じ値を持つnameの形式でcontrollerAsパターンを使用すると、同じエラーが発生しました。例えば:

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

スロー: TypeError:v2.signUpは関数ではありません

解決策は、フォームの名前を別の名前に変更することでした。

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

65
Aaron Gray

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>
11
Anandhan Suruli

これはあなたの問題に固有のものではないかもしれませんが、私もこのエラーを受け取っていたので、理由を理解するのに少し時間がかかりました。

関数と変数の両方に同じ名前を付け、変数を関数に割り当てたため、変数の割り当てが関数をオーバーライドし、2回目の実行で爆発しました。

この例では、upload.uploadFile = true;としてのuploadFile()関数に注目してください。これは、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'];
})();
7

ビューから呼び出し可能にするには、関数が$ scope内になければなりません。追加する

$scope.login = login;

コントローラーのJSコードに。

また、実際にそのコントローラーを使用する必要があります。変化する

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

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

これはすべて基本的なものです。私のアドバイスは、先に進む前にAngularJSチュートリアルから学ぶことです。

5
JB Nizet

2つは、ログイン関数を$ scopeに割り当てる必要がある双方向バインディングを有効にします。関数のコードをこれに置き換えます:

$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);
            }
        });
    }
4
Tomislav

私の回答が遅いかもしれません。しかし、それは私のために働いています

設定したフォーム名を確認してくださいe.g。ng-form = "login"

および関数名例:ng-click = "login()"

その後、それは動作しません。それらの1つを変更する必要があります。 例:ng-form = "loginForm"

3
Pooja-G

説明:

AngularJS 1.xは、formを介して_$scope_にnameプロパティを持つformDirectiveFactory DOM要素を登録します。上記の条件に該当する場合、このディレクティブは_form.FormController_を自動的にインスタンス化します。

name属性が指定されている場合、フォームコントローラーは現在のスコープに公開されます。

from:angular.js:24855

したがって、_<form name=myForm>_がある場合は、$scope.myForm = function() { ... }をオーバーライドします

0
Șerban Ghiță