In my AngularJS app, I have a local configuration file stored as a JSON file. I am using a service to fetch its content and then storing it in an object. The issue arises when trying to access the properties of this object outside of the callback function. Even though I can log the object inside the callback, it shows up as undefined when logged outside. Additionally, I attempted to use an angular expression as an attribute for a range slider element, but this resulted in an Angular parsing error. How can I access the config properties outside of the functions that call it from the service?
<div class="col-md-11">
<rzslider rz-slider-model="ageSlider.minValue"
rz-slider-high="ageSlider.maxValue"
rz-slider-options="ageSlider.options">
</rzslider>
</div>
HTML
function getConfigData() {
return Service.getConfigData().then(function(data){
$scope.config = data;
console.log("Config Data retrieved", $scope.config);
})
}
getConfigData();
$scope.ageSlider = {
minValue: 0,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1
}
};
JS: My goal is to utilize the properties of the config object to set the minimum and maximum values of the slider.
function getConfigData() {
return $http.get('/static/json/config.json')
.then(getConfigDataSuccess);
function getConfigDataSuccess(response) {
var config = response.data;
return config;
}
}
Service