md-grid-list and multiple md-sidenav

[jnovos]

"No instance found for handle" when I create $mdSidenav(navID).

<md-grid-list>
       <md-grid-tile ng-repeat="predefinido in predefinidosControl.predefinidos | filter:query:strict | orderBy: 'nombre'" style="background-color: #b3d4fc">
            <div flex layout="row">
                <md-checkbox class="md-checkbox.md-secondary"
                     ng-model="predefinido.id"
                     ng-checked="predefinidosControl.exists(predefinido, predefinidosControl.selectedPredefinidos)"
                     ng-click="predefinidosControl.checkToggle(predefinido, predefinidosControl.selectedPredefinidos)"
                      aria-label="{{predefinido.nombre}}">
                                {{predefinido.nombre}}
                </md-checkbox>
            </div>
            <md-button ng-click="predefinidosControl.toggleLeft(this.predefinido._id)" hide-gt-md aria-label="Menu" title="Menu">
                  <md-icon md-svg-icon="navigation:ic_more_vert_24px" alt="Menu"></md-icon>
            </md-button>
            <md-sidenav md-component-id="predefinido.id" flex layout="row" layout-align="end center" md-is-locked-open="$mdMedia('gt-md')">
             <md-button class="md-icon-button" aria-label="Editar" title="Editar" ng-click="predefinidosControl.editaPredefinido($event,predefinido)" >
               <md-icon class="s20" md-svg-icon="editor:ic_border_color_24px"></md-icon>
             </md-button>
             <md-button class="md-icon-button" aria-label="Eliminar" title="Eliminar" ng-click="predefinidosControl.deletePredefinido(predefinido.id)">
              <md-icon class="s20" md-svg-icon="action:ic_delete_24px"></md-icon>
            </md-button>
            <md-button class="md-icon-button" aria-label="Enviar" title="Enviar" ng-click="predefinidosControl.enviarPredefinido(predefinido.texto)">
             <md-icon class="s20" md-svg-icon="content:ic_send_24px"></md-icon>
            </md-button>
          </md-sidenav>
 </md-grid-tile>
</md-grid-list>

$rootScope.toggleLeft = function (navID) {
            console.log(navID);
            $mdSidenav(navID)
                    .toggle()
                    .then(function () {
                        $log.debug("MenuCtrl:toggleLeft:toggle " + navID + " is done", debug);
                    });
        }

The navID is the same into $rootScope.toggleLeft function but it gives an exception "No instance found for handle"

What am I doing wrong?

thanks

[jnovos]

When "md-sidenav" registers "md-component-id" with "$mdComponentRegistry.register" the $attrs.mdComponentId is not value of ng-model, It's a string value 'predefinido.id'. The html code has md-component-id well. any idea?
thanks

[jnovos]

The $element into SidenavController has a attributes array that have the correct value "md-component-id" but $attrs has a incorrect value of "md-component-id"

Is this a bug?

Thanks

[khalla]

Hi, i'm having a similar issue here.
I have a md-sidebar inside a directive with a controller associated with that directive.
And from what i have seen upon debugging, is that the controller inside directive gets executed before the $mdComponentRegistry.register for that md-sidenav. Therefore the error occurs.

It seems to me that i cannot overcome this with the current version of ngMaterial,
I will try, however, to set the directive priority to a low order value to see if gets executed later.

Somehow an event upon the completion of the registering components would be nice.

Cheers

[khalla]

Okay, just an update that worked for me and might be usefull for others.

Initialize the md-sidenav when an action is to performed with it.
It usual depends on some user interaction (hidding,showing), so initialize it on the action itself.

When i mean "initialize" it refers to the following part of code:

var sidenavObject = $mdSidenav("left");
sidenavObject.toggle()

Cheers

[khalla]

Ok, i have carefully read your issue, i think your problem is due to having:
md-component-id="predefinido.id" as an attribute to md-sidenav

Dont use variables in md-component-id attribute value, always use strings like:
md-component-id="left"

Cheers

[jnovos]

Ola Renato,

predefinido.id is a string of array, the problem is into SidenavController it doesnt get of value. Tomorrow I put a example.
Regards, Cumplimientos :-)

[khalla]

Hi Jorge,

Nevertheless, the . (dot) is really necessary?
I mean, predefinido is an object? If it is, then it cant be, have you tried a plain string, without any dot?

[rschmukler]

Can someone submit a codepen/plunker for us to play with to help debug the issue?

[jnovos]

Hi Ryan,

You can see into the Plunker,

Renato you can see the code source in above url.

regards