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

问题是只有手表触发＆＃34;看＆＃34;第一个输入，不再是。

我试图对多个输入使用相同的指令，但不起作用。如果我发出警报，要检查字段的属性名称，请始终显示＆＃34; data.cardholder_value＆＃34;，永远不要显示其他名称字段。

提前感谢你。

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

我的app控制器：

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指令属性的值，现在你提供了观察器功能作为你的验证功能，这意味着当它看到函数作为手表的第一个参数时它只会寻找该函数的返回值，用于确定在每个摘要周期中是否需要运行监听程序。

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

另外请记住，如果要捕获用户输入的值，您可以始终使用ngmodel上的现有$viewChangeListener属性，这将避免重用现有的内部观察程序，而无需显式创建。{/ p>

   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

1 个答案: