I'm trying to figure out why an Angular .component() which has a <md-sidenav> directive can't be located from the own component's controller. Angular throws the following error:
No instance found for handle menu
The whole component is:
function controller($mdSidenav) {
$mdSidenav("menu").open();
}
controller.$inject = ["$mdSidenav"];
components.component("sideAppMenu", {
controller: controller,
controllerAs: "model",
templateUrl: "path/to/template"
});
...and its template is:
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="menu">
hello world
</md-sidenav>
If I move the whole <md-sidenav> to my index.html (i.e. outside any directive/component), $mdSidenav can locate the whole Angular Material component.
What's going wrong here? Am I missing some detail?
I can confirm the whole component is rendered. That is, the template is located and injected successfully.
Update
I could figure out where's the issue: it's about the component life-cycle. If I use $timeout to try to access the so-called Angular Material component after a while the controller code is reached, $mdSidenav can locate the component:
function controller($mdSidenav, $timeout) {
$timeout(function() {
// OK!!!!!!!!
$mdSidenav("menu").open();
debugger;
},3000);
}
controller.$inject = ["$mdSidenav", "$timeout"];
If the issue is when to access the component, if it's when controller is initialized, when should I try to access an Angular Material component?
