为什么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>

最初所有输入控件都按预期显示此值,但是当通过type ="range"或type ="text"输入更改testVar时,type ="number"输入变为空白.以编程方式设置testVar的值会导致预期的行为:所有输入都显示更新的值.

这个简单的案例证明了这个问题:http://jsfiddle.net/7cbYp/

为什么会发生这种情况,如何解决？

Answer 1

一个快速修复方法是创建一个指令并观察模型和 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/

注意：必须有一种更干净的方法来做到这一点。