2016-12-19 6 views
0

1-99の間の値を制限するためにinputの指令を作成しようとしています。同じ入力では、値をパーセンテージに変換する別の指示があり、それが途中で得られているかどうかはわかりません。範囲確認のための角度指令

ディレクティブは、単純な(角のウェブサイトから基本的に取られる):

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

I入力を共有するディレクティブの優先順位についてSOを読みましたが、必ずしもそれが問題ではないと思います。しかし、99より大きい値を入力すると、下のスパンのいずれかが表示されますが、何も表示されません。そして、私の他の指示はいつもうまく動作します。どんな助けもありがとうございます。

+0

これが問題であるかどうかはわかりませんが、ディレクティブのIIFEを呼び出さないようです。 – ndoes

答えて

0

入力要素に属性ng-maxng-minの属性を使用してください。

+0

ディレクティブを一括して置き換えるか、それと連動する予定ですか? – erp

+0

ng-minとng-maxを使用すると、属性を使用して範囲チェックを渡すので、カスタムディレクティブを作成する必要はありません。 – manonthemat

+0

さて、私はいくつかの例を見てきましたが、この場合、単純に 'ng-min/ng-max'を追加しても、ユーザーがmaxより大きい数値を入力することはできません。 – erp