对多个输入的相同指令.这是可能的?AngularJS [英] Same directive to multiple inputs. it's possible? AngularJS

问题描述

我希望你能帮助我.

我有一个指令:

.directive('checkField', ['$http', function($http) {返回 {要求:'ngModel'，限制:'A'，链接:函数(范围，ele，attrs，c){范围.$watch(function() {if (attrs.ngModel === 'data.gender_value' && ele.val() !== '') {//有效的} 别的 {//错误}if (attrs.ngModel === 'data.cardholder_value' && ele.val() !== '') {//有效的} 别的 {//错误}});},模板: ''};}])

我的 html 中有多个输入:

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

问题是手表触发器只看到"第一个输入，没有更多.

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

提前谢谢你.

编辑 1:

这是我的 html 调用(ng-include):

{{数据 |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) {返回 {要求:'ngModel'，限制:'A'，链接:函数(范围，ele，attrs，ctrl){scope.$watch(attrs.ngModel, function(val) {console.log(attrs.ngModel, attrs.name, val)});},模板: ''};}]).controller('questionForm', ['$scope', '$http', 'fieldApiService', function ($scope, $http, fieldApiService) {...

解决方案

所有你只需要它来观察 ng-model 指令属性的值，现在你提供了观察者函数作为你的验证函数，这意味着当它看到函数作为 watch 的第一个参数时，它只会查找该函数的返回值，以确定在每个摘要周期中是否需要运行 watch 监听器.

 scope.$watch(attrs.ngModel, function(val) {如果(！val){//有效的} 别的 {//错误}});

还请记住，如果您想捕获用户输入的值，您可以始终使用现有的 $viewChangeListener ngmodel 上的属性，它将避免重用现有的内部观察者，无需显式创建一个.

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

演示

angular.module('app', []).directive('checkField', ['$http',函数($http){返回 {要求:'ngModel'，限制:'A'，链接:函数(作用域，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/>

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

解决方案

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>

这篇关于对多个输入的相同指令.这是可能的?AngularJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！