type = "number"の入力がそのバウンド値の更新を表示しないのはなぜですか？

Question

HTML入力コントロールのセットがtestVarにバインドされています

<div ng-app> 
    <div ng-controller="TestCtrl"> 
     <input type="text" ng-model="testVar"> 
     <input type="number" min="1" max="10" ng-model="testVar"> 
     <input type="range" min="1" max="10" ng-model="testVar"> 
     <button ng-click="testVar = 5">set to 5</button>    
    </div> 
</div> 

最初はすべて「=期待通りの入力コントロールがこの値を示すが、testVarはタイプによって変更されたときにタイプ=「数」の入力が空白になります「範囲」またはタイプ=「テキスト」入力。プログラムでtestVarの値を設定すると、予想される動作になります。すべての入力が更新された値を示します。 http://jsfiddle.net/7cbYp/

ですが、なぜでしょう、そしてそれがどのように固定することができます。

問題は、この単純なケースで実証されていますか？私はそれをテストしている

var App = angular.module('App', []); 
App.directive('fix', function(){ 
    return{ 
     link: function(scope, elem, attrs){ 
      scope.$watch(attrs.fix, function(v){ 
       if(typeof v === 'string') v = parseInt(v, 10); 
       elem.val(v); 
      }); 
      elem.bind('change', function(){ 
       scope[attrs.fix] = elem.val(); 
       scope.$digest(); 
      }); 
     } 
    }; 
}); 

Answer 1

クイックフィックスは

<input type="number" min="1" max="10" fix="testVar"> 

JSをディレクティブを作成し、モデルの変更やHTMLアイテム自体

HTMLを監視することですChrome上で動作します。

jsfiddle：http://jsfiddle.net/jaimem/HLnqt/3/

注：これを行うためのクリーンな方法がなければなりません。

Answer 2

入力[type = range]は、入力[type = number]に表示できない文字列にモデルデータ型を変換します。

同様の解決策の問題がここにあります。

Angular Data Binding - Input type="number"