Question

如果值不是整数，我有一个我希望验证失败的字段。还有另一个字段可以更新这个字段的值，所以我需要编写一个指令来监视字段值，只要将值更改为int以外的值，就会设置验证错误。

每当将'my-required'属性添加到HTML时，选择选项都不会加载，指令显然不起作用。

问题：我该如何做到这一点？

HTML：

<select ng-model="tran.type" name="tranType" ng-init="tran.type='1'" ng-options="obj.value as obj.text for obj in tradeTypeOptions" my-required="tran.type"></select>

指令：

.directive('myRequired', function() {
  var regex = /^\-?\d*$/;
  return {
    restrict: 'A',      
    scope: {
      'myRequired': '='
    },
    link: function(scope, elm, attrs, ctrl) {     
      scope.$watch('myRequired', function(n, o){
        //alert(n);
        if (regex.test(n)) {
          ctrl.$setValidity('myRequired', true);
        } else {
          ctrl.$setValidity('myRequired', false);
        }
      },true);
    }
  };
});

Answer 1

如果要设置输入的有效性，则必须使用

require: 'ngModel'

我认为你也不需要一个孤立的范围。而且，由于tran.type是基元，因此您不需要将$watch的第三个参数设置为true。最后，这是一个修改后的指令：

.directive('myRequired', function() {
  var regex = /^\-?\d*$/;
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      scope.$watch(attrs.myRequired, function(n, o){
        //console.log(n);
        if (regex.test(n)) {
          ctrl.$setValidity('myRequired', true);
        } else {
          ctrl.$setValidity('myRequired', false);
        }
      });
    }
  };
});

一个工作的jsfiddle：http://jsfiddle.net/aM84a/2/

Answer 2

您需要控制器。

.directive('myRequired', function() {
  var regex = /^\-?\d*$/;
  return {
    restrict: 'A',      
    scope: {
    'myRequired': '='
    },
    controller : 'ControllerName', // require the controller
    link: function(scope, elm, attrs, ctrl) {   
       // ctrl was never injected...
    }
}

带有$ watch的Angular指令，用于设置特定值的字段错误

2 个答案: