How to change text in div when doing setInterval function with highcharts-ng with angularjs
I have controller
one that has the following call:
userFactory.getScore(_token, function (response) {
$scope.scores = response;
renderCharts(response,$scope);
score.resolve();
});
here userFactory
is the factory.
Now in mine function renderCharts
:
function renderCharts(response,$scope) {
$scope.current_target_label = {"label":"Current Score"};
// Highcharts config object declaration here
setInterval(function($scope) {
// Logic to update highchart
$scope.current_target_label = {"label":"Target Score"};
}
}
The following assignment does not update the value in ng-bind in the view html
:$scope.current_target_label = {"label":"Target Score"};
I'm sure there is something wrong, evaluating for any pointers to make the text value div
update in the view html
?
source to share
setInterval
is outside the angular $ digest loop, so angular won't update the data bindings. You can use $apply
, but I would say it is bad practice. Better to use $timeout
or $interval
. This will trigger the $ digest loop. For example:
function renderCharts(response,$scope) {
// ...
$interval(function() {
// Logic to update highchart
$scope.current_target_label = {"label":"Target Score"};
}, delay);
}
Notes:
- You will, of course, need to implement the service where you need it.
- In your original code, you used
setInterval(function($scope) {
.$scope
here will probably be undefined, and thus the shadow of the outer variable$scope
.
source to share