从角度材料实现$ md-sidenav时出错

时间:2016-11-08 03:30:48

标签: javascript angularjs angular-material

我正在尝试在我的应用程序中实现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'但仍面临此问题。请以正确的方式指导我。

Map Sample Project Swift 3. 0 Xcode 8.1

1 个答案:

答案 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();
  });
});
相关问题