Question

上使用这个很棒的滑块

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

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

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

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

所以想听听你的想法。

干杯汤姆

Answer 1

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

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

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

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

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

您可以看到一个有效的示例here

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