Question

我试图在一个＆＃39;范围滑块中修复oldVal和newVal之间的差异＆＃39;和＆＃39;数字微调器输入＆＃39;彼此绑定。我注意到oldVal和newVal存在很大差异的错误。当步骤设置为5时，我预计会有1或5的差异。

当我绑定滑块和微调器时，这个错误变得明显，但是看着控制台，真正绑定它们只会使newVal和oldVal的潜在问题变得可见：我们进一步向右拖动滑块，差异越大。

这是我试图绑定滑块和放大器的内容。旋转器：

var spinnerVal = newVal; 
var newCss = spinnerVal / 100 + "%";
document.querySelector('.range-quantity').style.width = newCss;
document.querySelector('.range-handle').style.left = newCss;

滑块＆amp;旋转器绑定

http://jsfiddle.net/PaulOD/PpCC4/4/

我不确定这是否是绑定它们的最佳方式，是否有更标准的方法？

这是一个小提琴，我省略了上面的代码，但它们现在没有相互绑定。我们可以看到滑块移动得更加自然，但是控制台报告oldVal和newVal之间存在相同的差异。

http://jsfiddle.net/PaulOD/PpCC4/5/

最值得赞赏的任何帮助。如果我能找到一种方法来定位滑块的真值控制，那也很棒，只是改变css感觉有点笨拙。在jQuery中，我过去常常以“ui.value＆＃39;并且这些问题很好地解决了，但我这次没有使用jQuery就试图这样做。

我正在使用powerange滑块。 http://abpetkov.github.io/powerange/ 编辑：但我认为滑块的选择并不重要，因为我在这里用html范围滑块重现了这个错误： http://plnkr.co/edit/ke5n3x?p=preview

谢谢，保罗

Answer 1

看起来差异可能会增加，但实际上只取决于你“滑动”的速度。我记录了newVal - oldVal，根据我移动滑块的速度，数字越大。但整体而言也是如此。大多数时候我得到21和64。

也许您似乎喜欢这样，因为当您滑动“更长”时间（意味着超过视图ms）时，值会多次更新。

另一个想到你如何制定指令：

您应该使用双向绑定，而不是使用父作用域的值preview.donation。这是一篇解释它的文章：http://umur.io/angularjs-directives-using-isolated-scope-with-attributes/

干杯

Angular：使用范围滑块和数字微调器输入在oldVal和newVal之间出现差异

1 个答案: