sweatherly sweatherly - 7 months ago 37
CSS Question

Issue with ng-if and grid-tile

I am trying to hide a grid-tile when the screen size is small or less, at the same time I want show a hidden grid-tile. Both of these grid-tiles contain a d3 graph.

My issue is with loading the graph when the screen size changes; the tile appears but the graph does not load. However, if I refresh the page the graph will load. The issue is illustrated on this codepen (Resize to small window. Refresh).


<md-grid-tile ng-if="$mdMedia('gt-sm')" md-rowspan="2" md-colspan="9" md-colspan-md="6" md-colspan-sm="4" md-colspan-xs="1">
<md-card class="graph-card dark-cards" layout-fill>


To get the initial load to work I had to use $document.ready({});. I'm not sure how I could apply this to the page resizing/ng-if.


The problem is that your graph directive has no link function. Because, $document.ready returns undefined:

link: $document.ready(function loadGraph() {
    //Code here

You need to change that to:

link: function() {
    $document.ready(function() {
        //Your Code here    

Please check out this demo: http://codepen.io/anon/pen/akEwok