2014-01-20 10 views
5

私はangularjsで非常に簡単なログインフォームを作ろうとしていますが、ng-submit()やng-clickディレクティブのいずれも思われません働くこと。フォームのサブミットボタンに応答しないでください

ここでは、非常に基本的なプランカの例を作成しました:http://plnkr.co/edit/BrLIxSZggZofCBoZpjT4?p=preview ng-clickまたはng-submitのどちらかで「a」という文字のアラートウィンドウを開く必要があります。しかし、サインインボタンをクリックすると何も起こりません。もっと面白いことに、ng-appをng-app = "test"に変更すると、フォームが送信されますが、アラートは呼び出されません。

私は間違っていますか?

基本的な例:

<head> 
    <script data-require="[email protected]" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body ng-app> 
    <!-- Login --> 
    <form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
    ng-submit="alert('a')" ng-controller="Ctrl"> 

    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" /> 
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" /> 
    <input type="submit" ng-click="alert('a')" name="login" value="Sign in" /> 

    </form> 
    <!--/Login --> 
</body> 

</html> 

答えて

8

ng-submit指令は、コントローラにあるべき機能を呼び出します。 ng-submitディレクティブがトリガされますが、フォームフィールドが有効

フォーム/ HTML

<form data-title="Sign in" data-value="login" class="tab-pane" name="login" 
    ng-submit="submit()" ng-controller="Ctrl"> 
    <input type="text" name="username" value="" placeholder="Username" ng-model="model.username" ng-minlength="3" required autocapitalize="false" /> 
    <input type="password" name="password" value="" placeholder="Password" ng-model="model.password" required autocapitalize="false" autocorrect="false" /> 
    <input type="submit" name="login" value="Sign in" /> 
</form> 

コントローラ

function Ctrl($scope) { 
    $scope.model = {}; 
    $scope.submit = function(){ 
     alert('a'); 
    } 
} 

Plunkr

提供されます
関連する問題