2017-11-18 7 views
0

私はSOから多くのソリューションを試しましたが、いずれも機能しません。だから、私はそうのように定義されたHTMLフォームがあります。AngularJS v2.loginは関数ではありません

... 
$routeProvider 
    .when('/login', { 
     controller: 'LoginCtrl', 
     templateUrl: 'views/login.html' 
    }) 

そして最後に、私のログインコントローラがそのようにように定義されています:

私app.jsファイルで

//views/login.html 
<form name="form" ng-submit="login()" role="form"> 
... 
</form> 

を、私はこのコードを持っています

:私は送信ボタンをクリックしたとき
'use strict'; 

angular.module('frontendApp') 
    .controller('LoginCtrl',['$scope', function($scope) { 
     $scope.login = function() { 
      console.log("Test it"); 
     }; 
    }]); 

はしかし、私は、このエラーメッセージが表示されます

<form name="form" ng-submit="LoginCtrl.login()" role="form"> 

が、無駄に:10

v2.loginは、私はそうのようなフォーム定義を編集しようとした機能

ではありません。だから、それはどうしたら間違っていて、どうすれば修正できますか?

+0

あなたはモジュールとコントローラを使用した場所でフルHTMLを投稿できますか? – Niladri

+0

私はここに公開しました - https://github.com/chupacabra007/otus/tree/master/frontend/app – Jacobian

+0

'app.js'は' scripts'フォルダの中にあり、 'controllers'は' scripts/controllers'フォルダの中にあり、 'login.html'は' views'フォルダの中にあります。それが助けてくれることを願って。 – Jacobian

答えて

1

あなたが定義したとして、あなたもng-controller="login"を使用することができます

<div ng-controller="LoginCtrl"> 
<div ng-show="error" class="alert alert-danger">{{error}}</div> 
<form name="form" ng-submit="login()" role="form"> 
    <div class="form-group"> 
     <label for="username">Username</label> 
     <i class="fa fa-key"></i> 
     <input type="text" name="username" id="username" class="form-control" ng-model="username" required /> 
     <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span> 
    </div> 
    <div class="form-group"> 
     <label for="password">Password</label> 
     <i class="fa fa-lock"></i> 
     <input type="password" name="password" id="password" class="form-control" ng-model="password" required /> 
     <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span> 
    </div> 
    <div class="form-actions"> 
     <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-danger">Login</button> 
     <img ng-if="dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/> 
    </div> 
</form> 
</div> 

以下のようにあなたがng-submitlogin()機能を使用しているあなたのlogin.htmlページに同じコントローラ名またはエイリアスloginng-controllerを使用する必要がありますあなたのapp.jsにエイリアスとしてcontrollerAs: 'login'

関連する問題