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

Question

我正在尝试修复相互绑定的“范围滑块”和“数字微调器输入”中 oldVal 和 newVal 之间的差异。我注意到 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;

滑块和微调器绑定

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

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

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

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

非常感谢任何帮助。如果我能找到一种方法来定位滑块的真实值控件，那就太好了，只是更改 css 感觉有点 hacky。在 jQuery 中，我曾经以 'ui.value' 为目标，这很好地解决了这些问题，但这次我试图在没有 jQuery 的情况下做到这一点。

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

谢谢， 保罗

Answer 1

看起来差异可能会增加，但实际上取决于您“滑动”的速度。我登录了newVal - oldVal，根据我移动滑块的速度，数字越大。但在整个规模上都是一样的。大多数时候我得到 21 和 64。

在您看来可能是这样，因为当您滑动“更长”时间（意味着超过查看毫秒数）时，该值会多次更新。

再想想你是如何制定指令的：

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

干杯