BobDoleForPresident BobDoleForPresident - 5 months ago 186
AngularJS Question

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

I have an angular app that needs to switch states when a sidenav is opened or closed. This works fine when opening the sidenav and closing it via a close button. However I need to attach an ng-click to the md-backdrop in the event that the user closes the sidenav by clicking outside the sidenav. Has anyone else had this issue or does anyone have an idea on how to achieve this? Any help would be greatly appreciated.

Answer

you can add a custom backdrop. You have the code in the following 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;
}