jquery - 角度范围滑块jQuery插件

Question

我一直在 Angular 应用程序上使用这个很棒的滑块http://refreshless.com/nouislider/download

真的很喜欢这个滑块，因为它与 jQuery UI 滑块相比很小，并且内置了触摸控件。它真的非常好。

所以我创建了一个指令来过滤数据列表并且运行良好。我需要知道的是一种即时更改范围值的方法。因此，当数据进入时，我会得到一个新的低值和/或高值并更新范围。

这是我正在使用的指令的快速基本 Plunker

所以不确定这是一个 Angular 的东西，还是一个插件的东西。每当我获得新值时，是否可以实例化指令？

所以想听听你的想法。

干杯汤姆

score 0 · Accepted Answer

您最好的选择是将滑块的范围作为指令的范围变量。然后侦听此变量上发生的任何更改并更新滑块。

这可以通过以下方式实现：

return {
  restrict: 'A',
  scope: {
    values: '=ngModel',
    boundaries : '=' // the range of the slider
  },

然后是您收听更改的部分：

scope.$watch('boundaries', function(oldVal, newVal) {
  if(scope.slider !== null) {
    remove();
  }
  create();
});

你可以在这里看到一个工作示例

PS：不幸的是，没有简单的方法来更新 noUiSlider 的范围。这就是为什么我最终在 diretive 的元素中创建了一个内部 div。

1 回答 1