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>

最後に、使用しているマテリアル デザインのバージョンを確認する価値があります。>0.8 バージョンを使用していない場合、かなりの問題があるようです。

ドキュメントのサイド ナビゲーション マテリアル デザインの右ナビゲーションの例を参照してください。

于 2015-03-12T23:57:13.693 に答える