javascript - 为什么在监视表达式中更新 slider 选项时，AngularJS slider (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 中，有更新 slider 选项的代码:

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

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

我已尝试按照 AngularJS Slider Github 中的记录重新呈现 slider 页面，但它不能解决问题。

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

Answer 1

经过一番挖掘，我们发现这是一个时间问题。请注意，当 rzslider 设置为默认值时，这只是第一个 Angular 摘要循环中的问题并且由中的监视表达式更新相同的消化周期。

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

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

有两种可能的解决方案:

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

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