将滑块输入绑定到十进制值的AngularJS问题

Question

我有一个滑块（input type="range"），它的最小值= 0，最大值= 1和步长= 0.001，在角度控制器中定义。范围输入的默认“step”属性为1，因此如果使用ng-model=...的模型I绑定到它的起始值为0.5，则它将显示滑块为1（或者如果起始值为< 0.5，则为0），因为它的步骤太大了。

下面是一个JS提琴演示该问题： http://jsfiddle.net/1qhhr85x/

有没有人有一个简单的解决这个问题？

Answer 1

该问题与浏览器如何处理新输入[范围]类型以及Angular进行模板绑定的时间有关。

在这种情况下，模板结合被附加到DOM（导致浏览器渲染引擎踢）后会发生。

当渲染引擎启动时，它会尝试附加到HTML spec，该值决定如何计算最大步长，并相应地显示滑块。 （看看有什么有趣的关于最小必须浮动的步骤是一个计算的浮点数）

问题是，DOM包含“step ='{{step}}'”在这一点时间（Angular还没有开始，下一个周期），我假设渲染引擎使用默认值进行计算。

解决方案

确保模板添加到DOM前的步长值设定。您可以通过在控制器构造时设置“步长”值的值来实现此目的。 （我们并不想触摸控制器里面的元素，但我想不出另一种方式来设置的步骤之前它添加到DOM）

myApp.controller('CalcCtrl', function ($scope, $element) { 
    $scope.val1 = 0.4; 
    $scope.val2 = 0.74;  

    var rEl = $("input[type='range']", $element); 
    rEl.each(function (idx, el) { 
     $(el).attr("step", 0.001); 
    }); 
}); 

这里的工作小提琴： http://jsfiddle.net/dLaLgfp8/1/