8

我一直在使用

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

使用控制器中的 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，因此使用了类和箭头函数。:-)

4

1 回答 1

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中的右侧导航示例

于 2015-03-12T23:57:13.693 回答