angularjs - 如何在 Angular-Material Design 中打开 sideNav

Question

我一直在使用

<md-sidenav md-component-id="leftNav" md-is-open="vm.isOpen"
            md-is-locked-open="vm.isPinned" ... >
    <i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i>
    ...
</md-sidenav>

使用 Controller 中的 toggleNave 方法设置值

class MyController {
    constructor($mdSideNav) {
        this.mdSideNav = mdSideNav;
        this.isPinned = false;
        this.isOpen = false;
    }

    toggleNav = (navId) => {
        this.$mdSideNav(navId).toggle().then( () => {
            this.isPinned = this.isOpen;
        }
    }
}

但这会导致屏幕在打开和关闭时闪烁，这似乎不是打开 sideNav 的最佳方式。

愿望是让中殿切换开关打开/关闭，但在我关闭它之前保持粘性打开。

如果我使用 md-is-locked="$media('')"然后 sideNav 锁定打开并且永远不会关闭，直到窗口缩小到媒体大小以下。这不是我想要的。

如果我根本不使用 md-is-locked，那么当您单击远离它时，sideNav 会折叠关闭，但我希望它保持打开状态!直到我想关闭它。

有人知道怎么做吗？

谢谢

顺便说一句:我使用的是 ES6，因此使用了类和箭头函数。 :-)

Answer 1

从查看文档来看，我认为您不需要使用 isPinned 和 isOpen 变量，因为它看起来像切换函数处理它。

因此，这

toggleNav = (navId) => {
    this.$mdSideNav(navId).toggle().then( () => {
        this.isPinned = this.isOpen;
    }
}

会成为

toggleNav = (navId) => {
    this.$mdSideNav(navId).toggle();
}

要完成这项工作，您需要通过 sideNav 的 id

所以这

<i class="fa fa-bars float-right" ng-click="vm.toggleNav()"></i>

会成为

<i class="fa fa-bars float-right" ng-click="vm.toggleNav('leftNav')"></i>

最后，值得检查您使用的 Material Design 版本，当不使用 >0.8 版本时，似乎有很多问题。

请参阅文档中的右侧导航示例 Side Nav Material Design