为什么在监视表达式中更新滑块选项时 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 设置为默认值并在同一摘要周期中由监视表达式更新时，这仅是第一个角度摘要周期中的问题。

rzslider 更新选项代码和 angular watch 表达式代码的组合导致 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 表达式代码：

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

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

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

有两种可能的解决方案：

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

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