將滑塊輸入綁定到十進制值的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/