여러 입력에 동일한 지시. 있을 수있다? AngularJS

Question

나는 나를 도울 수 있기를 바랍니다.

나는 지시문이 있습니다

.directive('checkField', ['$http', function($http) { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, ele, attrs, c) { 
      scope.$watch(function() { 
       if (attrs.ngModel === 'data.gender_value' && ele.val() !== '') { 
        //valid 
       } else { 
        //error 
       } 

       if (attrs.ngModel === 'data.cardholder_value' && ele.val() !== '') { 
        //valid 
       } else { 
        //error 
       } 
      }); 
     }, 
     template: '' 
    }; 
}]) 

을 그리고 난 내 HTML에서 여러 개의 입력이 있습니다

<input ng-model="data.cardholder_value" type="text" size="50" data-check-field /> 
<input ng-model="data.gender_value" type="text" ng-required="true" data-check-field /> 

문제는 그 시계 트리거는 더 이상, 첫 번째 입력 "을 참조하십시오"입니다를.

동일한 입력문을 여러 입력에 사용하려고하지만 작동하지 않습니다. 내가 경고를하면, 필드의 속성 이름을 확인하기 위해 항상 "data.cardholder_value"를 표시하고 다른 이름 필드는 표시하지 마십시오.

미리 감사드립니다.

편집 1 : 이것은 내 html로 호출하는

(NG는-포함) :

이

<form method="post" id="formQuestion" name="formQuestion" ng-submit="sendForm()" novalidate ng-controller="questionForm"> 
{{data | json}} 
<div class="slide-animate" ng-include="'/templates/default/partials/_fields/1_card_type.html'"></div> 
<div class="slide-animate" ng-include="'/templates/default/partials/_fields/2_gender.html'"></div> 

내 응용 프로그램 컨트롤러 :

angular.module('app.controllers') 
.directive('checkField', ['$http', function($http) { 
    return { 
     require: 'ngModel', 
     restrict: 'A', 
     link: function (scope, ele, attrs, ctrl) { 
      scope.$watch(attrs.ngModel, function(val) { 
       console.log(attrs.ngModel, attrs.name, val) 
      }); 
     }, 
     template: '' 
    }; 
}]) 
.controller('questionForm', ['$scope', '$http', 'fieldApiService', function ($scope, $http, fieldApiService) { 
... 

Answer 1

그냥 필요한 모든 값을보고 ng-model 지시어 속성, 지금 당신은 시계의 첫 번째 인자로 함수를 보았을 때 유효성 검사 함수로 watcher 함수를 제공했다. 모든 다이제스트주기 동안 감시 수신기를 실행해야하는지 여부를 결정하기 위해 해당 함수의 값. 당신이 그것을 내부 감시자 명시 적으로 하나를 만들 필요없이 기존의 재사용을 방지 할 수 있습니다 당신은 항상 ngmodel의 기존 $viewChangeListener 속성을 사용하여 사용자가 입력 한 값을 잡을려면

 scope.$watch(attrs.ngModel, function(val) { 
      if (!val) { 
       //valid 
      } else { 
       //error 
      } 
     }); 

또한 기억한다.

c.$viewChangeListeners.push(function(){ 
     console.log('viewChange', ctrl.$viewValue) 
    }); 

데모

angular.module('app', []).directive('checkField', ['$http', 
 
    function($http) { 
 
    return { 
 
     require: 'ngModel', 
 
     restrict: 'A', 
 
     link: function(scope, ele, attrs, ctrl) { 
 
     scope.$watch(attrs.ngModel, function(val) { 
 
      console.log(attrs.ngModel, attrs.name, val) 
 
     }); 
 
     ctrl.$viewChangeListeners.push(function(){ 
 
      console.log('viewChange', ctrl.$viewValue) 
 
     }); 
 
     }, 
 
    }; 
 
    } 
 
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <input ng-model="data.cardholder_value" name="cardholder" type="text" size="50" data-check-field /> 
 
    <input ng-model="data.gender_value" name="gender" type="text" ng-required="true" data-check-field /> 
 
</div>