I have implemented angular-slider.js on a webpage where a server request is triggered upon changing the slider's value. I am looking to delay this action until the user releases the mouse button, specifically during onmouseup event.
Incorporating this functionality in a directive using the '=' isolate scope and assigning it to a scope variable is relatively simple.
However, encountering unexpected behavior with the angular-slider plugin.
Within the HTML code, I have included the 'mousewatch' attribute linked to the $scope variable 'mouseStatus'
$scope.mouseStatus = 0;
<slider floor="0" ceiling="10" ng-model-low="pMinBedsVal" ng-model-high="pMaxBedsVal" mousewatch="mouseStatus"></slider>
... and defined this in the directive as an isolate scope:
sliderDirective = function($timeout) {
return {
restrict: 'EA',
scope: {
floor: '@',
ceiling: '@',
step: '@',
precision: '@',
ngModel: '=?',
ngModelLow: '=?',
ngModelHigh: '=?',
translate: '&',
mousewatch: "="
},
...lastly, integrated the values of mousewatch into the onEnd and onStart events within the slider directive:
onEnd = function() {
pointer.removeClass('active');
scope.mousewatch = 0;
console.log("mouseup");
ngDocument.unbind(events.move);
return ngDocument.unbind(events.end);
};
onStart = function(event) {
pointer.addClass('active');
scope.mousewatch = 1;
console.log("mousedown");
dimensions();
event.stopPropagation();
event.preventDefault();
ngDocument.bind(events.move, onMove);
return ngDocument.bind(events.end, onEnd);
};
The issue lies in the fact that the value assigned to scope.mousewatch in the directive does not reflect in $scope.mouseStatus within the controller.