AngularJSでボタンをクリックしたときにディレクティブを使用して他の入力の妥当性を設定する

私はコントローラに頼っているのでAngularJSのディレクティブにはあまり慣れていません。指令によって他の入力に有効性を設定することは可能ですか？ここでは、ボタンがあり、クリックされたときです。特定の入力テキストに対して有効性を設定する必要があります。しかし、私はちょうど有効性を設定するコードを取得するように見えることはできません。ここでAngularJSでボタンをクリックしたときにディレクティブを使用して他の入力の妥当性を設定する

は、HTMLコードは次のとおりです。

<!DOCTYPE html> 
<html ng-app="myApp"> 

    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <div id="login-container"> 
      <div class="form-group"> 
       <span class="glyphicon glyphicon-user"></span> 
      </div> 
      <form name="loginForm" novalidate> 
       <div class="form-group"> 
        dasdas -- {{ loginForm.student_code.$error.codeValidity }} 
        <input type="text" class="form-control text-center" name="student_code" ng-model="studentCode" placeholder="Enter Exam Code" required /> 
        <span class="errors" id="error-student-code" ng-if="loginForm.student_code.$error.codeValidity">{{ errors }}</span> 
       </div> 
      </form> 
      <login-button form="loginForm"></login-button> 
      <a href="register"><button class="btn btn-primary">Register</button></a> 
     </div> 
    </div> 
    </body> 
</html>

ここでJSコードは次のとおりです。http://plnkr.co/edit/kcdDgZpStQixTpGWqxOp?p=preview

PS：ここ

var app = angular.module("myApp", []); 

    app.directive('loginButton', loginButton); 

    loginButton.$inject = ["$http", "$window"]; 

    function loginButton($http, $window){ 
    return { 
     template: '<button type="button" class="btn btn-primary">Take Exam</button>', 
     link: function(scope, element, attrs, ctrl){ 
      element.on('click', function(){ 
        form = attrs.form; 
        form.student_code.$setValidity('codeValidity', true); 
        scope.errors = "Code is Invalid"; 
       }); 
      } 
     } 
    }

はplunker上のサンプルです。

これはコントローラを使用して簡単に達成できますが、私はこれに慣れていくために指示を使用してこれを達成したいと思います。

出典

2016-05-29 Dean Christian Armada

はい、可能ですが、ほぼ正しいと思います。あなたがしたいのは、フォームを隔離されたスコープに渡してから、指示コントローラーで使用することです。 ng-clickを使用できるので、手動でイベントを追加する必要はありません。それ以外の場合は、$ scope。$ applyを使用する必要があります。

ディレクティブでは、リンク機能を使用できますが、そうする必要はありません。一般的には、リンク機能でコントローラとDOM操作でライトロジックを維持することをお勧めします。

var app = angular.module("myApp", []); 
 

 
app.directive('loginButton', loginButton); 
 

 
loginButton.$inject = ["$http", "$window"]; 
 

 
function loginButton($http, $window){ 
 
    return { 
 
    template: '<button type="button" class="btn btn-primary" ng-click="click()">Take Exam</button>', 
 
    scope: { 
 
     form: '=' 
 
    }, 
 
    controller: function($scope){ 
 
     $scope.click = function(){ 
 
     form = $scope.form; 
 
     form.student_code.$setValidity('codeValidity', false); 
 
     }; 
 
     
 
    } 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script> 
 
<div ng-app="myApp"> 
 
    <div class="container"> 
 
     <div id="login-container"> 
 
      <div class="form-group"> 
 
       <span class="glyphicon glyphicon-user"></span> 
 
      </div> 
 
      <form name="loginForm" novalidate> 
 
       <div class="form-group"> 
 
        dasdas -- {{ loginForm.student_code.$error }}<br> 
 
        <input type="text" class="form-control text-center" name="student_code" ng-model="studentCode" placeholder="Enter Exam Code" required /> 
 
        <span class="errors" id="error-student-code" ng-if="errors">{{ errors }}</span> 
 
       </div> 
 
      </form> 
 
      <login-button form="loginForm"></login-button> 
 
      <a href="#"><button class="btn btn-primary">Register</button></a> 
 
     </div> 
 
    </div> 
 
</div>

出典

2016-05-29 12:11:34 sielakos

あなたの答えは素晴らしいです！しかし、私は何かを逃した。私はちょっとコードを変更しました。 ng-if = "loginForm.student_code。$ error.codeValidity"> {{エラー}}を

jsfiddleを提供してください、コメントは読みにくいです – sielakos

を参照してくださいhttp://plnkr.co/edit/kcdDgZpStQixTpGWqxOp?p=preview –

AngularJSでボタンをクリックしたときにディレクティブを使用して他の入力の妥当性を設定する

答えて

関連する問題