javascript - 如何在 md-sidenav 中实用地添加或禁用(删除)md-disable-backdrop

Question

是否可以从 HTML 中删除 md-disable-backdrop 属性？

当我打开侧面导航时，md-sidenav 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

给你 - CodePen

如果您检查 md-sidenav 元素，您将看到 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;
    };
  });