对多个输入的相同指令。这是可能的？ 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 />

问题是 watch 只触发 "see" 第一个输入，没有更多。

我正在尝试对多个输入使用相同的指令，但不起作用。如果我发出警报，检查字段的属性名称，始终显示 "data.cardholder_value"，从不显示其他名称字段。

提前谢谢你。

编辑 1：

这是我的 html 呼叫 (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>

我的应用控制器：

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 指令属性的值，现在你提供了监视函数作为你的验证函数，这意味着当它把函数看作监视的第一个参数时，它只会从该函数中查找 return 值以确定监视侦听器在每个摘要周期中是否需要运行。

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

另外请记住，如果你想捕捉用户输入的值，你总是可以在 ngmodel 上使用现有的 $viewChangeListener 属性，这将避免重复使用现有的内部观察器，而无需显式创建一个.

   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>

对多个输入的相同指令。这是可能的？ AngularJS

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

angularjs

angularjs-directive