用于范围验证的Angular指令

Question

I am trying to make a directive for an input to limit the value between 1-99 . On the same input I also have another directive that converts the value to a percentage and am not sure if that is what is getting in the way.

The directive is simple (taken basically from the Angular website):

(function() {
  'use strict';

  angular
    .module('app.model')
    .directive('inputRange', inputRange);

  function inputRange() {
    return {
      require: 'ngModel',
      restrict: 'A',
      link: function(scope, elm, attrs, ctrl) {
        var INTEGER_REGEXP = /^-?\d+$/;
        ctrl.$validators.inputRange = function(modelValue, viewValue) {
          if (ctrl.$isEmpty(modelValue)) {
            // consider empty models to be valid
            return true;
          }

          if (INTEGER_REGEXP.test(viewValue)) {
            // it is valid
            return true;
          }

          // it is invalid
          return false;
        };
      }
    }
  }
});

And the section of html with the input field (which is paired with a slider):

  <form name="form">
    <div sc-slider
        ng-model="vm.baseline"
        min="0.01"
        max="0.99"
        initial="{{vm.baseline}}"
        step="0.01"
        uib-tooltip="The initial estimate of the KIQ's likelihood - prior to any indicator observations."

        tooltip-popup-delay="200"
        tooltip-popup-close-delay="200"
        tooltip-placement="bottom"></div>
    <input to-percent
        input-range
        name="baseline"
        style="text-align:center;"
        type="text"
        min="1"
        max="99"
        class="form-control"
        ng-model="vm.baseline"></input>
    <span ng-show="form.baseline.$error.inputRange">The value is not a valid integer!</span>
    <span ng-show="form.baseline.$error.min || form.baseline.$error.max">
      The value must be in range 1 to 99!</span>
  </form>

I have read on SO about priority for directives that share an input but I don't think that is necessarily an issue here. But when I enter a value greater than 99 I'd expect one of the spans below to show up, but nothing is appearing. And my other directive works fine all of the time. Any help is appreciated.

Answer 1

使您的生活更轻松，并在输入元素上使用ng-max和ng-min属性。