I have developed several custom AngularJS directives to display Highstock graphs, such as myGraphEff and myGraphEnergy.
Currently, I am working on integrating these graphs into a layout that includes a sidebar. The sidebar will list the names of each graph using "li" elements, and when clicked, the corresponding graph should be loaded.
Below is the code snippet from my controller:
var app = angular.module('app', []);
app.controller('myController', function($scope,$http) {
$scope.showingGraphs= [{name:"My Graph Eff",dir:"my-graph-eff"},{name:"My Graph Energy",dir:"my-graph-energy"}];
$scope.displaingGraph= $scope.showingGraphs[0].dir;
$scope.loadData = function(graphType){
$scope.displaingGraph= graphType;
$http.get('/reports/get-graph-data',{params:{"chartType": graphType}})
.then(function(response) {
$scope.data = response.data;
});
}
});
Next, here is an excerpt of the HTML code:
<div class="box-content">
<div class="span8">
<div ng-class="displaingGraph" items="data" style="height: 296px;"></div>
</div>
<div class="sparkLineStats span4 widget green" onTablet="span5" onDesktop="span4" >
<ul class="unstyled onhover" >
<li ng-repeat="graph in showingGraphs" ng-click="loadData(graph.dir);">{{ graph.name }}</li>
</ul>
</div>
</div>
The structure of my directive is as follows:
app.directive('myGraphEff', function () {
return {
restrict: 'C',
replace: true,
scope: {
items: '='
},
controller: function ($scope, $element, $attrs) {
},
template: '<div id="container" style="margin: 0 auto">not working</div>',
link: function (scope, element, attrs) {
var chart = new Highcharts.stockChart({
chart: {
renderTo: 'container',
type: 'area'
},
title: {
text: 'my graph eff'
}
});
scope.$watch("items", function (newValue) {
chart.series[0].setData(newValue, true);
}, true);
}
}
});
There seems to be an issue when using ng-class to load the directive content. While loading the directive directly with its class works fine, using ng-class does not render the content properly.
Upon inspecting the rendered HTML in the browser, I noticed that the class is correctly applied to the element, but the content is missing when using ng-class.
The main goal is to change the displayed graph when a user clicks on its name. What could be causing this issue, and how can it be resolved?