md-sidenavでmd-disable-backdropを実際に追加または無効にする方法

Question

HTMLからmd-disable-backdrop属性を削除することはできますか？

md-disable-backdropサイドナビゲーションを開いても属性が追加されません。私はちょうどサイド・ナビゲーションに表示されたフォームから選択して、今、私はあなたが行くここmd-sidenav

<md-sidenav md-component-id="right" class="md-sidenav-right md-whiteframe-4dp" md-disable-backdrop id="rightSideNav"> 

Answer 1

にmd-disable-backdrop属性を追加したい - あなたはmd-sidenav要素あなたを調べる場合CodePen

md-disable-backdrop属性が切り替わります。注：は、が背景を切り替えることはありません。これは私があなたが実際に望んでいると思われるものです。

マークアップ

<div ng-controller="AppCtrl" layout="column" ng-cloak="" ng-app="MyApp"> 
    <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 id="mySideNav" 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-button ng-click="toggleMdDisableBackdrop()">Toggle md-disable-backdrop</md-button> 
    </md-content> 
    </md-sidenav> 
</div> 

JS

angular 
    .module('MyApp',['ngMaterial']) 
    .controller('AppCtrl', function ($scope, $mdSidenav, $element) { 
    $scope.mdDisableBackdrop = false; 
    $scope.sideNav = angular.element($element[0].querySelector('#mySideNav')); 

    $scope.toggleRight = function() { 
     $mdSidenav('right') 
     .toggle() 
     .then(function() { 
     }); 
    } 
    }) 
    .controller('RightCtrl', function ($scope, $mdSidenav) { 
    $scope.close = function() { 
     $mdSidenav('right').close(); 
    }; 

    $scope.toggleMdDisableBackdrop = function() { 
     if ($scope.mdDisableBackdrop) { 
     $scope.sideNav.removeAttr('md-disable-backdrop'); 
     } 
     else { 
     $scope.sideNav.attr("md-disable-backdrop", "true"); 
     } 
     $scope.mdDisableBackdrop = !$scope.mdDisableBackdrop; 
    }; 
    });