AngularJS材料 - 侧导航不使用玉答案

【问题标题】：AngularJS material - side nav not working using jadeAngularJS材料 - 侧导航不使用玉
【发布时间】：2016-02-24 23:00:32
【问题描述】：

我目前正在开发一个使用 Angular Material 的项目。我遇到了无法切换/打开 sidenav 的问题。我在下面粘贴了一部分代码。我使用 Jade 作为模板引擎。在控制器中，我可以记录来自 md-component-id attr 的 ID。有人可以指出我解决此问题的正确方向吗？可能是布局问题？

谢谢。

main.jade

#layout-vertical-navigation(layout='row', flex, style='height:100%;')
        md-sidenav#vertical-navigation.md-sidenav-left.md-whiteframe-z2(ng-include='"/app/layout/partial/left-sidebar.html"', md-component-id="sideNav", md-is-locked-open="$mdMedia('gt-sm')")

left-sidebar.jade

div(ng-controller='LeftSidebarController as leftSidebar')
     md-toolbar(layout='row')
        md-button.md-icon-button(ng-click='leftSidebar.openSideNavPanel("sideNav")')
            md-icon.material-icons menu
     md-content
        md-list
            md-list-item(ui-sref='home')
                md-tooltip(md-direction='right') Dashboard
                md-icon.material-icons home
                p Dashboard

left-sidebar.js ....

(function () {
'use strict';

angular
    .module('ignoreme')
    .controller('LeftSidebarController', LeftSidebarController);

LeftSidebarController.$inject = ['$mdSidenav'];

/* @ngInject */
function LeftSidebarController($state, $mdSidenav) {

    function openSideNavPanel(id) {
        console.log(id);
        $mdSidenav(id).toggle();
    }

    /////////////////////////////////
    var vm = this;

    vm.openSideNavPanel = openSideNavPanel;
}

})();

【问题讨论】：

标签： javascript angularjs controller material-design angular-material

【解决方案1】：

main.jade

div(ng-include='"/app/layout/partial/left-sidebar.html"')

left-sidebar.jade

#sideNavContainer(ng-controller='LeftSidebarController as leftSidebar', layout='row')
  md-content
    md-button.md-icon-button(ng-click='leftSidebar.openSideNavPanel("sideNav")')
        md-icon.material-icons menu
  md-sidenav.md-sidenav-left.md-whiteframe-z2(md-component-id='sideNav')
    md-content
        md-button.md-icon-button(ng-click='leftSidebar.openSideNavPanel("sideNav")')
            md-tooltip(md-direction='right') Close Navigation
            md-icon.material-icons keyboard_arrow_left
    md-list
        md-list-item(ui-sref='home')
            md-tooltip(md-direction='right') Dashboard
            md-icon.material-icons home
            p Dashboard
        .....

【讨论】：