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

Question

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

这是一个证明问题的JS小提琴： http://jsfiddle.net/1qhhr85x/

有没有人能轻松解决这个问题？

Answer 1

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

在这种情况下，模板绑定在 附加到dom之后发生 （这会导致浏览器渲染引擎启动）。

当渲染引擎启动时，它会尝试遵守HTML spec，这决定了如何计算步骤，min＆amp;最大并相应地显示滑块。 （看一看，有一些有趣的事情，关于min必须浮动才能成为计算浮动的步骤）

问题是DOM包含＆＃34; step =＆＃39; {{step}}＆＃39;＆＃34;在这个时间点（Angular还没有开始，下一个循环就会这样），我假设渲染引擎使用默认值进行计算。

解决方案

确保在将模板添加到DOM之前设置步长值。你可以通过设置＆＃34; step＆＃34;的值来实现这一点。控制器结构的价值。 （我们不应该触摸控制器内部的元素，但我无法想到在将其添加到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/