我正在尝试在我的应用程序中实现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>
我的控制器代码是
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';
}]);
当我尝试运行该应用时,我收到错误SideNav 'left' is not available! Did you use md-component-id='left'?
我使用md-component-id='left'
但仍面临此问题。请以正确的方式指导我。
答案 0 :(得分: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();
});
});