为什么在监视表达式中更新滑块选项时 AngularJS 滑块 (rzslider) 无法正确更新？

Question

我有一个设置为默认值的 rzslider。

HTML:

<div id="slider">
    <rzslider class="with-legend"
              rz-slider-model="slider.value"
              rz-slider-options="slider.options"> 
    </rzslider>
</div>

Javascript:

$scope.slider = {
    this.value = 0;
    this.options = {
        floor: 0,
        ceil: 0
}

在 Watch Expression 中，有更新滑块选项的代码：

$scope.$watch('foo', function () {
    $scope.slider.value = 0;
    $scope.slider.options.floor = 0;
    $scope.slider.options.ceil = foo.length;
}

watch 表达式中的代码是运行之后，我希望滑块的上限选项会发生变化。但是，即使 $scope.slider 的值已正确更新，更改也不会出现在滑块本身上。

我已尝试按照 AngularJS Slider Github 页面上的说明重新呈现滑块，但未能解决问题。

$scope.refreshSlider = function() {
  $timeout(function() {
    $scope.$broadcast('rzSliderForceRender')
  })
}

Answer 1

经过一番挖掘，我们发现这是一个时间问题。请注意，当 rzslider 设置为默认值 and[=46 时，这只是 first angular 摘要循环中的一个问题=] 在同一个摘要周期中由 watch 表达式更新。

rzslider 更新选项代码和 angular 监视表达式代码的组合导致 rzslider 在第一个摘要周期中错过更新。

这是 rzslider 更新选项代码：

this.scope.$watch('rzSliderOptions()', function(newValue, oldValue) { if (newValue === oldValue) return; self.applyOptions(); // need to be called before synchronizing the values self.syncLowValue(); if (self.range) self.syncHighValue(); self.resetSlider(); }, true);

这是调用 rzslider 更新选项代码的 angular 手表表达式代码：

watch.fn(value, ((last === initWatchVal) ? value : last), current);

在第一个摘要循环中 last 等于 initWatchVal，因为（根据 angular）没有变化。 Determining oldValue

这意味着 rzslider 代码中的 newValue 和 oldValue 都包含滑块选项的更新版本。比较这些值时，函数 returns 在调用 self.applyOptions(); 之前会更新滑块。

有两种可能的解决方案：

在第一个摘要循环完成后更新滑块选项运行。这可以使用超时或将更新代码添加到按钮单击事件。

在更新滑块选项后渲染滑块。 我们通过将 rzslider 放在 ng-if 中实现了这一点。当我们显示元素时，rzslider 是用更新后的值创建的。

为什么在监视表达式中更新滑块选项时 AngularJS 滑块 (rzslider) 无法正确更新？

Why does AngularJS Slider (rzslider) not update correctly when the slider options are updated inside a watch expression?

javascript

angularjs

angularjs-slider