When working in my Controller, I am retrieving data from a $resource object that is stored in a caching service.
$scope.data = myService.query(); //myService caches the response.
Within the same controller, I am setting up the configuration for a chart (for the GoogleChartingDirective).
$scope.chart = {
'type': 'AreaChart',
'cssStyle': 'height:400px; width:600px;',
....
'rows' : convert($scope.data),
...
}
The function 'convert' simply takes the data from myService and transforms it into an array suitable for the chart.
This setup works only if the response of the query has already been cached (If I navigate away and then back, the graph appears, but not when accessing the route directly).
I suspect the issue may lie with my caching method?
angular.module('webApp')
.service('myService', function myService($cacheFactory,res) {
var cache = $cacheFactory('resCache');
return {
query: function() {
var data = cache.get('query');
if (!data) {
data = res.query();
cache.put('query', data);
}
return data;
}
};
});
I attempted to use $scope.$watch in my Controller. It was triggered only once without any data. However, when I switch routes and then return, it triggers again, this time with the data present.
$scope.$watch('data',function(newValue){
console.log("Watch called " + newValue);
}
It seems like there might be an issue with the $watch event not being properly activated.
If I manually trigger a refresh using a button, the $watch event fires and the data displays as expected.
$scope.refresh = function(){
$scope.data = $scope.data.concat([]);
}
As someone new to AngularJS, I am exploring through a small demo project and seeking guidance on resolving common challenges.
Do you have any suggestions on how to overcome this problem?