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

问题描述

我希望你能帮助我。

我有一个指令：

  .directive（'校验场'，['$ HTTP'，函数（$ HTTP）{
    返回{
        要求：'ngModel'，
        限制：'A'，
        链接：功能（范围，ELE，ATTRS，C）{
            范围。$表（函数（）{
                如果（attrs.ngModel ==='data.gender_value'和;＆安培; ele.val（）==''！）{
                    //有效
                }其他{
                    //错误
                }                如果（attrs.ngModel ==='data.cardholder_value'和;＆安培; ele.val（）==''！）{
                    //有效
                }其他{
                    //错误
                }
            }）;
        }，
        模板：''
    };
}]）
 

和我在我的HTML多输入：

 ＆LT;输入NG模型=data.cardholder_value类型=文字大小=50数据检查场/＆GT;
＆LT;输入NG模型=data.gender_value类型=文本NG-所需=真数据检查场/＆GT;
 

的问题是，只有手表触发看到的第一输入，没有更多的

我试图去同一指令多个输入使用，但不起作用。如果我做一个警告，检查现场的属性名称，始终显示data.cardholder_value，从来没有其他名称字段。

感谢ü提前。

编辑1：

这是我的HTML调用（NG-包括）：

 ＆LT;形式方法=邮报ID =formQuestionNAME =formQuestionNG提交=sendForm（）的novalidate NG-控制器=questionForm＆GT;
{{数据| JSON}}
＆LT; D​​IV CLASS =幻灯片动画NG-包括=/模板/默认/谐音/ _fields / 1_card_type.html'＆GT;＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =幻灯片动画NG-包括=/模板/默认/谐音/ _fields / 2_gender.html'＆GT;＆LT; / DIV＆GT;
 

我的应用程序控制器：

  angular.module（'app.controllers'）
.directive（'校验场'，['$ HTTP'，函数（$ HTTP）{
    返回{
        要求：'ngModel'，
        限制：'A'，
        链接：功能（范围，ELE，ATTRS，CTRL）{
            范围。$腕表（attrs.ngModel，功能（VAL）{
                的console.log（attrs.ngModel，attrs.name，VAL）
            }）;
        }，
        模板：''
    };
}]）
.controller（'questionForm'，['$范围，$ HTTP，fieldApiService'，函数（$范围，$ HTTP，fieldApiService）{
...
 

解决方案

所有你只需要它来观看 NG-模型指令属性的值，你提供的现在观察者功能的验证功能，它的意思是当它看到的功能手表它只是仅查找的返回值从函数，以确定是否手表监听器需要运行与否期间，每消化周期的第一个参数。

 范围。$腕表（attrs.ngModel，功能（VAL）{
            如果（！VAL）{
                //有效
            }其他{
                //错误
            }
        }）;
 

还记得，如果你想赶上用户输入值，你总是可以使用现有的 $ viewChangeListener 上ngmodel财产，就会避免现有的内部守望无需显式创建的重用。

 角$ viewChangeListeners.push（函数（）{
       的console.log（'viewChange，按Ctrl。$ viewValue）
    }）;
 

演示

\r

\r

angular.module（应用，[]）。指令（校验场 ，['$ HTTP，\r
  功能（$ HTTP）{\r
    返回{\r
      要求：'ngModel'，\r
      限制：'A'，\r
      链接：功能（范围，ELE，ATTRS，CTRL）{\r
        范围。$腕表（attrs.ngModel，功能（VAL）{\r
          的console.log（attrs.ngModel，attrs.name，VAL）\r
        }）;\r
        Ctrl键。$ viewChangeListeners.push（函数（）{\r
           的console.log（'viewChange，按Ctrl。$ viewValue）\r
        }）;\r
      }，\r
     };\r
  }\r
]）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序＆GT;\r
  ＆LT;输入NG模型=data.cardholder_valueNAME =持卡人类型=文字大小=50数据检查场/＆GT;\r
  ＆LT;输入NG模型=data.gender_valueNAME =性别类型=文本NG-所需=真数据检查场/＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

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