Угловой материал - боковой Nav

Question

Я использую sidenav углового материала. Я открываю сиднава динамически. Панель появляется с фоном. Пользователь может щелкнуть по фону, чтобы закрыть sidenav. Мне нужно, чтобы отключить закрытие sidenav при нажатии фонового экрана. ты можешь помочь мне с этим?

Answer 1

Здесь вы идете - CodePen

Хитрость заключается в том, чтобы получить доступ задник элемент и отключить события указателя на него.

Markup

<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"); 
     }); 
    }; 
    });