AngularJS - 如何验证元素指令？

Question

我创建了一个 numberDirective

function numberInputDirective()
 {
    return 
    {
        restrict: 'E',
        scope: 
        {
            model: '=',
            disabled: '=?',
            decimals: '=?',
            form: '=',
            name: '='
        },
        require: '^form',
        replace: true,
        templateUrl: 'directives/pxNumberInput.html',
        link: function (scope, element, attrs, form) 
        {
              scope.inError = function () 
              {
                  return form.control.$valid; //I need to do something like this    
              }
        }
    }

我需要检查isError函数是否控件中的值有效

模板是：

<input class="input-field form-control" type="number" ng-model="model">

HTML 是：

 <form role="form" class="form-horizontal psi-keyrates-yieldform psi-keyrates-historical-topcurves" name="SampleControlsForm" novalidate>
      <px-number-input id="objectiveid" name="numericExample"    model="sampleDataModel.numericField" placeholder="Enter numeric value" label="Numeric" required maxlength="10"></px-number-input>
</form>

虽然表单变量告诉我表单 (form.$valid) 是否有效，但我需要在提交表单时知道该特定指令是否具有有效值。类似于 form.control.$valid.

我不知道该指令中控件的名称，因为它将在 html 中设置。

我试过了：var elem = ctrl.$name + '.' + element.attr('name') + '.$valid'; 这将返回字符串“SampleControlsForm.numericExample.$valid”，如果我在其上添加手表，它也无济于事，scope.$eval 也无济于事。

我确定我没有正确使用它。

Answer 1

这是一个自定义数字验证器的示例，它显示：

1. 如何require ngModel 以便您可以访问其控制器。
2. 如何通过将属性添加到 $validators 对象（角度 1.3 及更高版本）来添加您自己的自定义验证器。对于角度 ngModelController.$setValidity
3. 如何在$error 对象上设置$watch 以根据验证通过还是失败来插入/删除图像。
4. 如何创建与ngModel 一起使用而无需定义模板的自定义指令。

$validators 对象允许您为同一个ngModel 注册多个验证指令。要添加验证器，只需将验证指令添加到与ngModel 相同的元素。

var app = angular.module('app', []);
app.directive('myNumber', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    compile: function(element, attr) {
      var img = angular.element('<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTTyptDmp09eMq1nHtcJHVTAMkKgqdi1ZiGMQSjFeYNApkO92zhCA" />');
           
      return function(scope, element, attr, ngModelCtrl) {
        function isNumber(n) {
            return !isNaN(parseFloat(n)) && isFinite(n);
        }
        
        ngModelCtrl.$validators.mynumber = function(val) {
          return isNumber(val);
        };
        scope.$watch(function() {
          return ngModelCtrl.$error.mynumber;
        }, 
        function(newVal) {
          if (newVal) {
            element.after(img);
          }
          else {
            img.remove();
          }
        });
      }
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<div ng-app="app">
  <form name="form">
    <input type="text" name="age" my-number ng-model="age" /> {{ age }}
  </form>
  {{ form.age.$error }}
</div>