角材料sidenav不工作

时间:2017-04-16 15:57:36

标签: angularjs angular-material

我正在尝试进行侧导航。我在网上看过一个教程并跟着它。似乎我所做的一切都是对的,但它没有用。

如果你帮助我,我将非常感激。提前谢谢

代码

angular.module('myApp')
.controller('MainCtrl', function ($scope, $timeout, $mdSidenav) {

  $scope.openSideNavPanel = function() {
      $mdSidenav('left').open();
  };
  $scope.closeSideNavPanel = function() {
      $mdSidenav('left').close();
  };

});

HTML:

<md-toolbar>
    <md-button class="md-icon-button" aria-label="Side Panel" ng-click="openSideNavPanel()">
        <md-tooltip>Side Panel</md-tooltip>
        <md-icon class="md-default-theme" class="material-icons">&#xE5D2;</md-icon>
    </md-button>
</md-toolbar>

<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left">
    <md-toolbar layout="row">
     <div class="md-toolbar-tools">
        <h2>
          <span>Side Panel</span>
        </h2>
        <span flex></span>
        <md-button class="md-icon-button" aria-label="Close Side Panel" ng-click="closeSideNavPanel()">
          <md-tooltip>Close Side Panel</md-tooltip>
          <md-icon class="md-default-theme" class="material-icons">&#xE5CD;</md-icon>
        </md-button>
       </div>
    </md-toolbar>
    <md-content layout-padding="">
      Side navigation Panel
    </md-content>
</md-sidenav>

<md-content flex layout-padding>



    <div class="container">
    <div ng-view=""></div>
    </div>


  </div>

</md-content>

更多信息: 我正在使用yeoman角度发生器

1 个答案:

答案 0 :(得分:0)

找到答案。以上所有内容都是正确的只有一个额外的控制器应该被写入。

因为我正在使用Angular Yeoman Generator,而我正在为MainCtrl中的Controller编写代码,其中MainCtrl负责View main.html而不是INDEX.html

因此,仅为索引编写一个新的Controller ,并将about代码放在div下,如下所示

<div ng-controller="indexController">
       all abouve html code
  </div>

并且有效