I am using angular ui router to do my routing for my application. I am essentially doing a collection of d3 visualizations, with each state/partial being it's own visualization.
Something like this
/#/line_graph?dataset=foo
/#/heat_map?dataset=foo&month=December
This worked fine when I just had to worry about the line graph.. "state" I guess we can call it.
Now, I am introducing a heatmap visualization into the mix. I found one that I liked and just copied the css directly from the example.
However, I now am finding that this css is conflicting with the styling for the line graph. I tried to put the link tag inside my partial, like so
index.html
<body ng-controller="ParentCtrl">
<main class='container-fluid' ui-view></main>
</body>
heatmap.html (the partial)
<link href='/path/to/my/stylesheet' rel='stylesheet' type='text/css'>
This did not work.
I then tried a more hackish take on this approach.
<div ng-if='loadHeatMapStylesheet'>
<link href='/path/to/my/stylesheet' rel='stylesheet' type='text/css'>
</div>
And my controllers
visualizationControllers.controller('ParentCtrl', [
'$scope',
function($scope) {
$scope.loadHeatMapStylesheet = false;
}
]);
visualizationControllers.controller('HeatMapCtrl', [
'$scope',
function($scope) {
$scope.loadHeatMapStylesheet = true;
}
]);
This also did not work, I am still seeing the conflicting styles. Now, I know that I could just go in and change the css so that things aren't conflicting, but I am simply going to run into this problem again the next time I want to try to add a new visualization.
So, given that I don't know a ton about CSS, is there a way to do what I am asking?
