2

我有一个设置为默认值的 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;
}

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

我已尝试按照AngularJS Slider Github页面上的文档重新渲染滑块，但它不能解决问题。

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

1 回答 1

2

经过一番挖掘，我们发现这是一个时间问题。请注意，当 rzslider 设置为默认值并在同一摘要周期中由 watch 表达式更新时，这只是第一个角度摘要周期中的问题。

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 更新选项代码的角度手表表达式代码：

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

在第一个摘要循环中lastequals initWatchVal，因为（根据角度）没有变化。 确定 oldValue

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

有两种可能的解决方案：

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

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

于 2019-08-12T14:58:51.667 回答