Question

Ich versuche, Sidentenav in meiner Anwendung zu implementieren. Unten ist meine Vorlage.

<div class='dashboard' ng-controller="DashBoardCtrl"> 
    <div layout='row'> 
    <div layout='column' flex='30'> 
     <md-sidenav md-component-id="left" class="md-sidenav-left"> 
      Left Nav! 
     </md-sidenav> 
    </div> 
    <div layout='column' flex='70'> 
     {{test}} 
    </div> 
</div> 

und mein Controller-Code ist

angular.module('common').controller('DashBoardCtrl', ['$scope', 'Constants', '$mdSidenav', function($scope, Constant, $mdSidenav) { 
    $scope.$emit('HideTools', { show: true }); 
    $mdSidenav('left').toggle(); 
    $scope.test = 'to test controller binded to view'; 
}]); 

Wenn ich versuche, die app ich Störung erhalte laufen SideNav 'left' is not available! Did you use md-component-id='left'?

I md-component-id='left' verwendet haben, aber immer noch dieses Problem gegenüber. Bitte führe mich richtig.

Answer 1

Hier ist eine Lösung - CodePen

Es ist wie die md-sidenav sieht zur Zeit nicht des toggle() Anrufs zur Verfügung steht. A $timeout ermöglicht dies geschehen.

Markup

<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp"> 
    <div layout='row'> 
    <div layout='column' flex='30'> 
     <md-sidenav md-component-id="left" class="md-sidenav-left"> 
     Left Nav! 
     </md-sidenav> 
    </div> 
    <div layout='column' flex='70'> 
     {{test}} 
    </div> 
</div> 

JS

angular.module('MyApp',['ngMaterial']) 

.controller('AppCtrl', function($mdSidenav, $timeout) { 
    $timeout(function() { 
    $mdSidenav('left').toggle(); 
    }); 
});