javascript - md-sidenav Angular Material 防止点击外部关闭

Question

如果我单击侧面导航外部(如果单击 md-backdrop)，我需要防止侧面导航关闭。例如，对于 md-dialog，有一个名为:clickOutsideToClose 的指令，其中 false 表示如果单击外部，则不会关闭对话框。我需要这样的东西。有可能吗？这是导航的示例:http://codepen.io/ThomasBurleson/pen/LEZvWw

<div ng-app="sidenavDemo1" ng-controller="AppCtrl" layout="column" layout-fill>
  <section layout="row" flex>
    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
      <md-toolbar class="md-theme-indigo" layout="row">
        <h1 class="md-toolbar-tools">Sidenav Left</h1>
        <span flex>
        <md-menu>
      <md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="ctrl.openMenu($mdOpenMenu, $event)">
        <md-icon md-menu-origin class="material-icons">phone</md-icon>
      </md-button>
      <md-menu-content width="4">
        <md-menu-item>
          <md-button ng-click="ctrl.redial($event)">
            <md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
            Redial
          </md-button>
        </md-menu-item>
        <md-menu-item>
          <md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
            <md-icon md-svg-icon="call:voicemail"></md-icon>
            Check voicemail
          </md-button>
        </md-menu-item>
        <md-menu-divider></md-menu-divider>
        <md-menu-item>
          <md-button ng-click="ctrl.toggleNotifications()">
            <md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
            {{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
          </md-button>
        </md-menu-item>
      </md-menu-content>
    </md-menu> 
      </md-toolbar>
      <md-content class="md-padding" ng-controller="LeftCtrl">
        <md-button ng-click="close()" class="md-primary" hide-gt-md>
          Close Sidenav Left
        </md-button>
        <p hide-md show-gt-md>
          This sidenav is locked open on your device. To go back to the default behavior,
          narrow your display.
        </p>
        <p> 
        The "right" sideNav is open = {{isOpen()}} </p>
      </md-content>
    </md-sidenav>
    <md-content flex class="md-padding">
      <div layout="column" layout-fill layout-align="center center">
        <p>
        The left sidenav will 'lock open' on a medium (>=960px wide) device.
        </p>
        <div>
          <md-button ng-click="toggleLeft()" class="md-primary" hide-gt-md>
            Toggle left
          </md-button>
        </div>
        <div>
          <md-button ng-click="toggle()" class="md-primary" >
            Toggle right
          </md-button>
        </div>
      </div>
    </md-content>
    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
      <md-toolbar class="md-theme-light">
        <h1 class="md-toolbar-tools">Sidenav Right</h1>
      </md-toolbar>
      <md-content ng-controller="RightCtrl" class="md-padding">
        <md-button ng-click="close()" class="md-primary">
          Close Sidenav Right
        </md-button>
      </md-content>
    </md-sidenav>
  </section>
</div>

Answer 1

您只需要使用md-is-locked-open。当您单击相应的按钮时，将其设置为 true 和 false。

检查以下链接。 http://codepen.io/next1/pen/aNZYJb