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

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

无论何时，只要将“my required”属性添加到HTML中，select选项都不会加载，而且指令显然不起作用

问题：我如何使这项工作

这是小提琴：

html:

---

您需要控制器

.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...
    }
}

---

若要设置输入的有效性，必须使用

require: 'ngModel'

我想你也不需要一个孤立的范围。而且，由于

tran.type

是一个原语，因此不需要将

$watch

的第三个参数设置为

true

。最后，这里是一条经过修改的指令：

.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);
    }
  };
});

.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:

$watch允许验证，即使它是由另一个操作或指令（即不是用户输入）更新的。这就是我的用例中发生的情况。我认为我需要定义作用域来隔离，这样我就可以在其他字段上重用该指令，但显然，这只是隔离作用域并覆盖父作用域，这就是为什么没有加载select值的原因。谢谢你的帮助。这个指令也可以在多个元素上重复使用（当然有不同的模型）。请看这里：

.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);
        }
      });
    }
  };
});