无论如何要将 ng-click 添加到 md-backdrop？

Question

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

Answer 1

Sidenav 允许您绑定一个 "md-is-open" 参数，该参数根据 sidenav 是打开还是关闭而为真或假。如果您通过单击背景关闭 sidenav，Sidenav 将更新它。您可以绑定此变量并 $watch 它以了解 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 演示：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 open/close，但是你不能阻止关闭它

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>

在抽屉控制器中：

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

当然，在侧边栏 opens/closes 的按钮上：

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

无论如何要将 ng-click 添加到 md-backdrop？

Is there anyway to add an ng-click to md-backdrop?

html

javascript

angularjs

material-design