angular-material - 角度 Material - 侧面导航

Question

我正在使用 Angular Material 的 sidenav。我已经动态打开了侧导航。该面板带有背景。用户可以单击背景来关闭侧导航。我需要的是在单击背景时禁用侧导航关闭。你能帮我解决这个问题吗？

Answer 1

给你 - CodePen

技巧是访问背景元素并禁用其上的指针事件。

标记

<div ng-controller="AppCtrl" layout="column" style="height:500px;" ng-cloak="" class="sidenavdemoBasicUsage" ng-app="MyApp">
  <section id="section" layout="row" flex="">
    <md-content flex="" layout-padding="">
      <div layout="column" layout-fill="" layout-align="top center">
        <div>
          <md-button ng-click="toggleRight()" ng-hide="isOpenRight($event)" class="md-primary">
            Toggle right
          </md-button>
        </div>
      </div>
      <div flex=""></div>
    </md-content>
    <md-sidenav class="md-sidenav-right md-whiteframe-4dp" md-component-id="right">
      <md-content ng-controller="RightCtrl" layout-padding="">
        <md-button ng-click="close()" class="md-primary">
          Close Sidenav Right
        </md-button>
      </md-content>
    </md-sidenav>
  </section>
</div>

JS

angular
  .module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
  .controller('AppCtrl', function ($scope, $timeout, $mdSidenav, $log, $element) {
    var section,
        backdrop;

    $scope.toggleRight = function() {
      $mdSidenav('right')
        .toggle()
        .then(function () {
        $log.debug("toggle right is done");
        // Disable pointer events on backdrop
        section = angular.element($element[0].querySelector('#section'));
        backdrop = section[0].children[0];
        backdrop.style.pointerEvents = 'none';
      });
    }
  })
  .controller('RightCtrl', function ($scope, $timeout, $mdSidenav, $log) {
    $scope.close = function () {
      $mdSidenav('right').close()
        .then(function () {
          $log.debug("close RIGHT is done");
        });
    };
  });