我有一个设置为默认值的rzslider。
超文本：
<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
}在监视表达式中，有一些代码可以更新滑块的选项：
$scope.$watch('foo', function () {
$scope.slider.value = 0;
$scope.slider.options.floor = 0;
$scope.slider.options.ceil = foo.length;
}运行watch表达式中的代码后，我希望滑块的ceiling选项发生变化，但是，即使$scope.slider的值已经正确更新，滑块本身也不会发生变化。
我已经尝试重新呈现AngularJS Slider Github页面上记录的滑块，但它没有解决这个问题。
$scope.refreshSlider = function() {
$timeout(function() {
$scope.$broadcast('rzSliderForceRender')
})
}
2条答案
按热度按时间bbmckpt71#
经过深入研究，我们发现这是一个时间问题，注意，这只是在第一个角摘要周期中的问题，当rzslider被设置为默认值***并且***在同一个摘要周期中被监视表达式更新时。
rzslider更新选项代码和Angular 监视表达式代码的组合导致rzslider在第一个摘要周期中错过更新。
这是rzslider更新选项代码：
以下是调用rzslider更新选项代码的Angular 监视表达式代码：
在第一个摘要循环中，
last等于initWatchVal，因为（根据Angular ）没有变化。Determining oldValue这意味着rzslider代码中的
newValue和oldValue都包含更新版本的滑块选项，当比较这些值时，函数在调用self.applyOptions();之前返回，self.applyOptions();将更新滑块。有两种可能的解决方案：
1.* 在第一个摘要循环完成运行后更新滑块选项。* 这可以通过使用超时或向按钮单击事件添加更新代码来完成。
1.* 在滑块选项已经更新后渲染滑块。* 我们通过将rzslider放入
ng-if中来实现这一点。当我们显示元素时，rzslider从一开始就使用更新后的值创建。lmvvr0a82#
下面是更新作用域中数据的解决方案。当你创建一个onclick函数（onclick）时，你应该把它放到这个作用域中。
完整代码：
Excel文件：
Excel File