Javascript 使用ng模型更新数字边界

我正在尝试使用ng模型绑定输入编号。如果输入号码超出范围，则会显示弹出提示

<input type="number" class="input-number" id="bar-length" value="" ng-model="barLength" min="300" max="650" required>
<div class="input-help">
    <h4>The length is outside the current range of acceptable values.</h4>
</div>

验证非常有效。但是，当单位从“mm”更改为“in”时，我想更改绑定范围，所以我用Javascript和JQuery编写了：

if (units === "in") {
    $("#bar-length").attr("min", 15.75);
    $("#bar-length").attr("max", 31.50);
}

---

ng模型边界似乎没有相应改变。当输入的数字在15.75和31.50之间时，弹出提示仍然出现。我是新手，不知道如何修复它。我该怎么办呢？

不要使用jquery，除非你用指令包装它，用angularJS的思维方式思考， 正如我在评论中指出的那样，angular还不支持这一点，但您可以编写指令使其工作：

var-app=angular.module（'app'，[]）；
函数isEmpty（值）{
返回角度.isUndefined（值）| |值==''| |值===null | |值！==value；
}
应用指令（'ngMin'，函数（）{
返回{
限制：“A”，
要求：'ngModel'，
链接：函数（作用域、元素、属性、ctrl）{
作用域：$watch（attr.ngMin，函数（）{
ctrl.$setViewValue（ctrl.$viewValue）；
});
var minValidator=函数（值）{
var min=范围$eval（attr.ngMin）| 0；
如果（！isEmpty（value）&&valuemax）{
ctrl.$setValidity（'ngMax'，false）；
返回未定义；
}否则{
ctrl.$setValidity（'ngMax'，true）；
返回值；
}
};
ctrl.$parsers.push（maxValidator）；
ctrl.$formatters.push（maxValidator）；
}
};
});
引导（document.body，['app']）；

---

编辑：当CONTAINT更改时刷新验证状态

这实际上是angularJS中缺少的功能：“不要在您自己的指令前面加上

ng

，否则它们可能与Angular未来版本中包含的指令冲突”

if (units === "in") {
    $("#bar-length").attr("min", 15.75);
    $("#bar-length").attr("max", 31.50);
}

var app = angular.module('app', []);

function isEmpty(value) {
  return angular.isUndefined(value) || value === '' || value === null || value !== value;
}

app.directive('ngMin', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMin, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var minValidator = function(value) {
              var min = scope.$eval(attr.ngMin) || 0;
              if (!isEmpty(value) && value < min) {
                ctrl.$setValidity('ngMin', false);
                return undefined;
              } else {
                ctrl.$setValidity('ngMin', true);
                return value;
              }
            };

            ctrl.$parsers.push(minValidator);
            ctrl.$formatters.push(minValidator);
        }
    };
});

app.directive('ngMax', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, elem, attr, ctrl) {
            scope.$watch(attr.ngMax, function(){
                ctrl.$setViewValue(ctrl.$viewValue);
            });
            var maxValidator = function(value) {
              var max = scope.$eval(attr.ngMax) || Infinity;
              if (!isEmpty(value) && value > max) {
                ctrl.$setValidity('ngMax', false);
                return undefined;
              } else {
                ctrl.$setValidity('ngMax', true);
                return value;
              }
            };

            ctrl.$parsers.push(maxValidator);
            ctrl.$formatters.push(maxValidator);
        }
    };
});

angular.bootstrap(document.body, ['app']);