Question

我有一个角度应用程序，需要在打开或关闭sidenav时切换状态。这在打开sidenav并通过关闭按钮关闭时工作正常。但是，如果用户通过单击sidenav外部关闭sidenav，我需要将ng-click附加到md-backdrop。有没有其他人有这个问题或有没有人知道如何实现这一目标？任何帮助将不胜感激。

Answer 1

Sidenav允许你绑定一个＆＃34; md-is-open＆＃34;参数，无论是真还是假，取决于更低的侧面是打开还是关闭。如果您通过单击背景关闭sidenav，Sidenav将更新它。您可以绑定此变量并将其视为知道sidenav状态，如下所示：

HTML：

<div layout="row" ng-controller="MyController">
    <md-sidenav md-component-id="left" md-is-open="isSidenavOpen" class="md-sidenav-left">
        Left Nav!
    </md-sidenav>
</div>

JS：

app.controller('MyController', function($scope, $mdSidenav) {
    $scope.isSidenavOpen = false;

    $scope.$watch('isSidenavOpen', function(isSidenavOpen) {
       alert('sidenav is ' + (isSidenavOpen ? 'open' : 'closed'));
    });
});

jsfiddle demo：http://jsfiddle.net/qo1gmrrr/

Answer 2

您可以添加自定义背景。您拥有以下jsfiddle中的代码。

HTML：

<div ng-app="myapp">
<div layout="row" ng-controller="MyController">
    <md-backdrop class="md-sidenav-backdrop md-opaque md-default-theme md-sidenav-backdrop-custom disabled" ng-click="checkClosingForm()"></md-backdrop>
    <md-sidenav md-component-id="left" class="md-sidenav-left">
        Left Nav!
    </md-sidenav>
     <md-content>
        <md-button ng-click="toggleLeft()">
          Open Side Nav
        </md-button>
      </md-content>
</div>

JS：

    var app = angular.module('myapp', ['ngMaterial']);

    app.controller('MyController', function($scope, $mdSidenav) {
      $scope.keepOpen = false;

      $scope.toggleLeft = toggleLeft;

      function toggleLeft(){
        $mdSidenav('left').toggle().then(function () {
                $scope.keepOpen = !$scope.keepOpen;
                if ($scope.keepOpen)
                    angular.element('md-backdrop.md-sidenav-backdrop-custom').removeClass('disabled');
                else
                   angular.element('md-backdrop.md-sidenav-backdrop-custo   
m').addClass('disabled');
        });   
  };

  $scope.checkClosingForm = function(){
      if(true){
          alert('checking...');
          toggleLeft();
      }
  };

});

的CSS：

md-backdrop.md-sidenav-backdrop-custom{
      background-color: transparent !important;
}
md-backdrop.disabled
{
    display:none;
}

Answer 3

当然你可以通过md-is-open来处理sidenav打开/关闭，但你无法阻止关闭它

Answer 4

如果mb-bottom-sheet需要使用onRemove：

$mdBottomSheet
    .show({
        templateUrl: '_TEMPLATE_FILE_',
        onRemove: function (scope, element, options) {
            var scrollmask = document.getElementsByClassName('md-scroll-mask');
            var backdrop = document.getElementsByTagName('md-backdrop');
            angular.element(scrollmask).remove();
            angular.element(backdrop).remove();
            angular.element(element).remove();
            $mdUtil.enableScrolling();
        }
    });

Answer 5

这是我的解决方案，不使用$ scope或$ watch，或操纵DOM：

在我看来：

<md-sidenav class="md-sidenav-left md-whiteframe-4dp" 
            md-swipe-left="drawerCtrl.toggle()"  md-component-id="left">
......
</md-sidenav>
<md-backdrop class="md-sidenav-backdrop" ng-click="drawerCtrl.toggle()" 
             ng-show="drawerCtrl.drawerOpen"></md-backdrop>

在DrawerController中：

 this.toggle = function () {    
                $mdSidenav('left').toggle();
                self.drawerOpen = $mdSidenav('left').isOpen();
                ....
    };

当然，在您打开/关闭侧栏的按钮上：

<md-button ng-click="drawerController.toggle()"></md-button>

反正有没有添加ng-click到md-backdrop？

5 个答案: