Same directive to multiple inputs. it's possible? AngularJS

问题

I hope u can help me.

I have a directive:

.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: ''
    };
}])

And i have multiple inputs in my 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 />

The problem is that watch trigger only "see" the first input, no more.

I'm trying to use de same directive to multiple inputs, but doesn't work. If i do an alert, to check the attribute name of field, always display "data.cardholder_value", never other name field.

Thank u in advance.

Edit 1:

This is my html calling (ng-include):

<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>

My app controller:

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) {
...

回答1:

All you just need it to watch the value of ng-model directive attribute, right now you provided the watcher function as your validation function which mean when it sees function as first argument for the watch it will just only look for the return value from that function to determine if watch listener needs to run or not during every digest cycle.

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

Also remember if you want to catch the user entered values you can always use the existing $viewChangeListener property on ngmodel, it will avoid reuse of existing internal watcher and no need to explicitly create one.

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

Demo

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>

来源：https://stackoverflow.com/questions/28331992/same-directive-to-multiple-inputs-its-possible-angularjs

标签

angularjs

angularjs-directive