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

如何在md-sidenav中实用地添加或禁用（删除）md-disable-backdrop

1 个答案: