Question

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

感谢。

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')")

左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

左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;
}

}）（）;

Answer 1

main.jade

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

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

AngularJS材质 - 侧面导航无法使用玉

1 个答案: