Question

您好我正在开发angularjs应用程序。我正在验证文本框。我正在进行范围验证。文本框应接受指定范围内的数字。我已经为此目的制定了指令。我将值指定为range-number =＆＃34; 10,4096＆＃34;。我想在angularjs代码中分配而不是在此标签中分配值。

下面是我的HTML。

  <div class="inputblock" ng-class="{ 'has-error' : ((form5.$submitted && form5.DownPayment.$invalid )|| (form5.DownPayment.$invalid && form5.DownPayment.$dirty))}">
                        <div>
                            <span class="ang-error" style="color:#fff" ng-show="form5.DownPayment.$dirty && form5.DownPayment.$invalid  && form5.DownPayment.$error.rangeNumber">
                                <span ng-show="form5.DownPayment.$invalid && form5.DownPayment.$dirty">Invalid</span>
                            </span>
                        </div>
                        <input class="" type="text" name="DownPayment" placeholder="{{ 'DownPayment' | translate }}" ng-model="DownPayment" required ng-readonly="makereadonlyDownPayment" range-number="range">
                    </div>

以下是我的js代码。

app.directive('rangeNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            var range = attrs.rangeNumber.split(',').map(Number);
            ctrl.$validators.rangeNumber = function (value) {
                return value >= range[0] && value <= range[1];
            };
        }
    };
});

我可以知道我该怎么办？任何帮助，将不胜感激。谢谢。

Answer 1

您可以将包含这些信息的数组传递给您的指令，您的html可以是：

<input class="" type="text" name="DownPayment" placeholder="{{ 'DownPayment' | translate }}" ng-model="DownPayment" required ng-readonly="makereadonlyDownPayment" range-number="range">

并使用隔离范围将变量范围检索到指令中：

return {
    require: 'ngModel',
    scope: {
        range: '='
    },
    link: function (scope, elem, attrs, ctrl) {
        if (!ctrl) return;
        var range = scope.range;
        ctrl.$validators.rangeNumber = function (value) {
            return value >= range[0] && value <= range[1];
        };
    }
}

Answer 2

我希望这能解决你的问题

app.directive('rangeNumber', function () {
    return {
        require: 'ngModel',
        link: function (scope, elem, attrs, ctrl) {
            if (!ctrl) return;
            var range = scope.$eval(attrs.rangeNumber);
            range = range.split(',').map(Number);


            ctrl.$parsers.push(function(value) {
              value = +value;
              var isValidRange = !(value >= range[0] && value <= range[1]);
              ctrl.$setValidity('range', isValidRange);

              return value;
          });
        }
    };
});

控制器

$scope.range = '1,4096';
// or you can make it array, but in that case you have to remove split 
//and map functions from the directive
$scope.range = [1, 4096];

HTML

<input class="" type="text" name="rangeNumber" ng-attr-placeholder="{{ 'DownPayment' }}" ng-model="DownPayment"  range-number="range">
<p ng-show="!sampleForm.rangeNumber.$invalid && sampleForm.rangeNumber.$dirty">Number not in range</p>

https://jsfiddle.net/yordan_nikolov/pwejm6de/

被修改

如何使用javascript代码为指令赋值？

2 个答案: