为什么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经由类型改变变为空白=”范围“或type =”文本“输入。以编程方式设置testVar的值会导致预期的行为：所有输入显示更新的值。 http://jsfiddle.net/7cbYp/

这究竟是为什么，以及如何可以把它固定：

的问题是由这个简单的例子证明这一点。

Answer 1

速战速决是创建一个指令并观察模型的变化以及HTML项目本身

HTML

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

JS

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(); 
      }); 
     } 
    }; 
}); 

我只测试了它在Chrome上，它的作品。

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

注：必须有这样做一个更清洁的方式。

Answer 2

input [type = range]将模型数据类型转换为字符串，该字符串不能在输入[type = number]中显示。

解决方法类似的问题在这里。

Angular Data Binding - Input type="number"