My setup includes two sliders, one for brightness and the other for contrast. They are linked to a "brightness" model and a "contrast" model. These sliders are located within a tab interface, and I noticed that every time the tab was changed, the values were being reset. To address this issue, I decided to implement a factory service to store the values and ensure that the factory gets updated with the new value whenever the sliders are adjusted. I can confirm that the slider models are being updated because there is a box next to each slider displaying the current value of the model. However, after the value is set by the service, the console seems to log only once and not thereafter.
Controller Code:
'use strict';
angular.module('oct').controller('LeftCtrl', ['$scope', '$timeout', '$mdSidenav', '$log', 'OctSettings', function($scope, $timeout, $mdSidenav, $log, OctSettings) {
$scope.resolutions = ['Resolution 1', 'Resolution 2', 'Resolution 3'];
$scope.toggleDropdownArray = ['', '', '', ''];
$scope.isThetaView = true;
$scope.isCartView = true;
$scope.isLongView = true;
$scope.brightness = Number(OctSettings.image.brightness);
$scope.contrast = Number(OctSettings.image.contrast);
$scope.$watch('brightness',
function(newVal, oldVal) {
console.log(oldVal);
});
$scope.close = function() {
$mdSidenav('left').close()
.then(function() {
$log.debug('close LEFT is done');
});
};
$scope.toggleDropdown = function(index) {
if($scope.toggleDropdownArray[index] === 'toggle-up') {
$scope.toggleDropdownArray[index] = 'toggle-down';
} else {
$scope.toggleDropdownArray[index] = 'toggle-up';
for(var i=0; i<$scope.toggleDropdownArray.length; i++) {
if(i !== index) {
$scope.toggleDropdownArray[i] = 'toggle-down';
}
}
}
};
}]);
HTML incorporating Angular Material for Slider Display:
<md-tab label="Image">
<md-content class="md-padding settings-tabs-pg-content">
<div class="brightness-div" layout="">
<div flex="10" layout="" layout-align="center center"><span class="md-body-1 fa fa-sun-o"><md-tooltip>Brightness</md-tooltip></span></div>
<md-slider flex="" min="0" max="100" ng-model="brightness" aria-label="brightness" id="brightness-slider" class="">
</md-slider>
<div flex="20" layout="" layout-align="center center">
<input type="number" ng-model="brightness" aria-label="brightness" aria-controls="brightness-slider">
</div>
</div>
<div layout="">
<div flex="10" layout="" layout-align="center center">
<span class="md-body-1 fa fa-adjust"><md-tooltip>Contrast</md-tooltip></span>
</div>
<md-slider flex="" min="0" max="100" ng-model="contrast" aria-label="contrast" id="contrast-slider" class="">
</md-slider>
<div flex="20" layout="" layout-align="center center">
<input type="number" ng-model="contrast" aria-label="contrast" aria-controls="contrast-slider">
</div>
</div>
<div>
<a class="window-leveling-btn">Window Leveling</a>
</div>
</md-content>
</md-tab>