Rodrigo Borba Rodrigo Borba - 5 months ago 85
AngularJS Question

Slider not beeing updated after apply

I have an object model which contains the view information. When I do some changes on this object and then I use the apply, every component but the slider are updated. I can see the slider updated only after a resize on the window. Any idea?

$rootScope.$on('newPrintSelected', function (event, selectedPrinter) {
StorageModule.storage.find(collectionName, {_id : selectedPrinter.printer_hardware._id}, function(error, data){
if (error) { //Not Found
console.error("Ops. There is something wrong with this action...");
}else {
if(data[0].printOptions == null){
$scope.options = angular.copy($scope.default);
$scope.options.layerThickness = 30 - ($scope.options.layerThickness * 100);
$scope.persistedOptions = angular.copy($scope.default);
$scope.persistedOptions.layerThickness = 30 - ($scope.persistedOptions.layerThickness * 100);
}else{
data[0].printOptions.layerThickness = 30 - (data[0].printOptions.layerThickness * 100);
$scope.options = angular.copy(data[0].printOptions);
$scope.persistedOptions = angular.copy(data[0].printOptions);
}
}
$scope.selectedPrinterHardware = angular.copy(data[0]);
console.warn($scope.options);
$scope.$apply();
});
});


Slider:

<div class="slider">
<rzslider rz-slider-model="options.infill" rz-slider-options="slider.infill">

</rzslider>
</div>


$scope.options is the object used as model. console.warn($scope.options); shows that the object is correct.

Fix:

setTimeout(function(){ $scope.$broadcast('rzSliderForceRender'); }, 25);


For every time that the Slider is showen.

This was on the documentation. I'm sorry for that.

Answer

What about broadcasting a refresh event:

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

Reference 1 Reference 2

Comments