javascript - 为什么类型为 ="number"的输入不显示对其绑定(bind)值的更新？

Question

一组HTML输入控件绑定(bind)到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>

最初所有输入控件都按预期显示此值，但是当通过 type="range"或 type="text"输入更改 testVar 时，type="number"输入变为空白。以编程方式设置 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/

注意:必须有更简洁的方法来执行此操作。