javascriptコードを使ってディレクティブに値を割り当てる方法は？

Question

こんにちは私はangularjsアプリケーションを開発しています。私はテキストボックスの検証をしています。私は範囲の検証をしています。テキストボックスは、指定された範囲内の数値を受け入れる必要があります。私はこの目的のために指令を作成しました。私はrange-number = "10,4096"という値を割り当てています。このタグに値を代入する代わりに、私は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/

編集