mdSidenav renders before scope variables are populated

[tiagovtristao]

Actual Behavior:

• What is the issue? *

The html below is loaded by a component through the property templateUrl, and the mdSidenav directive is rendered before {{ ::$ctrl.id }} gets evaluated. So the md-component-id becomes literally the string "{{ ::$ctrl.id }}"

<md-sidenav
    class="md-sidenav-left md-whiteframe-2dp"
    md-component-id="{{ ::$ctrl.id }}"
    md-is-locked-open="$mdMedia('gt-sm')">
        <md-toolbar>
            <h1 class="text-center">{{ $ctrl.header }}</h1>
        </md-toolbar>
        <md-content>
            <menu-dropdown navigation="$ctrl.navigation"></menu-dropdown>
        </md-content>
</md-sidenav>

Angular Versions: *

• Angular Version: 1.5.5
• Angular Material Version: 1.0.9

[crisbeto]

@tiagovtristao I couldn't reproduce it, at least with the docs examples. Can you post a demo that shows the issue? As a side note: doesn't adding ng-cloak work?

[tiagovtristao]

@crisbeto check https://jsfiddle.net/hjpnp7g6/

If you click on MEN text you get the console error 'No instance found for handle left-sidebar', BUT if you change "{{ $ctrl.id }}" on line 4 to "left-sidebar", then when you click on the text again, the side bar will open

[crisbeto]

Ah thanks, now I see it. I was under the impression that the data bindings were showing instead of the text.

[tiagovtristao]

No worries, and thanks :)