角度材料から$ md-sidenavを実装する際にエラーが発生する

Question

私のアプリケーションにsidenavを実装しようとしています。以下は私のテンプレートです。

<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> 

と私のコントローラコード私は私がmd-component-id='left'を使用しますが、まだこの問題に直面しているエラーSideNav 'left' is not available! Did you use md-component-id='left'?

を取得していますアプリケーションを実行しようとすると

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'; 
}]); 

です。親切に私を正しい方法で案内します。

Answer 1

ここでは一つの解決策だ - CodePen

はmd-sidenavがtoggle()コールの瞬間に利用できないように見えます。 $timeoutはこれを可能にします。マークアップ

<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(); 
    }); 
});