用於范圍驗證的Angular指令

Question

我正在嘗試為input設置指令以將值限制在1-99之間。 在同一輸入上，我還具有另一個指令，該指令將值轉換為百分比，並且不確定這是否會成為問題。

該指令很簡單（基本上從Angular網站獲取）：

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

以及帶有輸入字段（與滑塊配對）的html部分：

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

我已經閱讀了關於共享輸入的指令的優先級的信息，但我認為這不一定是一個問題。 但是，當我輸入一個大於99的值時，我期望下面的跨度之一出現，但是什么也沒有出現。 我的其他指令一直都可以正常工作。 任何幫助表示贊賞。

Answer 1

使您的生活更輕松，並在輸入元素上使用ng-max和ng-min屬性。