I am uncertain if I am approaching this correctly, but my goal is to convert a piece of code from a controller to a directive. The reason for this change is that I want to reuse the code with different values without creating multiple large object literals. Instead, I plan to have one object and update the values dynamically. However, I am facing an issue with binding chartConfig in the directive. Can you advise if I am on the right track?
Below is the code snippet for my directive:
app.directive('percentageSquare', function(){
return {
restrict: 'E',
scope: {
bgClass: '@',
percentage: '@',
chartConfig: '='
},
link: function(scope){
var fontSize = 80;
var percentage = scope.percentage || 0;
scope.chartConfig = {
options: {
chart: {
// Custom chart settings go here
}
}
};
},
templateUrl: '/templates/dashboard/charts/PercentageChart.html'
};
});
Here is the template used by the directive (PercentageChart.html):
<div class="drop-shadow">
<div class="row">
<div class="col-sm-12">
<highchart config="chartConfig" class="{{bgClass||''}}" ng-show="true"></highchart>
</div>
</div>
</div>
This is how I am implementing the directive:
<percentage-square bg-class="bg-orange" percentage="23"></percentage-square>
After moving chartConfig to the directive, it no longer binds as expected. Do you have any suggestions on resolving this issue?
Edit
I made some progress with the following workaround:
scope.$watch(scope.chartConfig, function(){
scope.chartConfig = {
// Update Chart Settings
};
});
However, I notice that the chart loads twice, resulting in duplicated animations. Any ideas on how to rectify this?