Md menus do not close when using ng-repeat

Question

<md-menu-bar>
  <md-menu ng-repeat="section in sections">
    <md-button class="navButton" ng-click="$mdOpenMenu()">
      {{section.name}}
    </md-button>
    <md-menu-content>
      <md-menu-item>
        <md-button>Subsection 1</md-button>
      </md-menu-item>
    </md-menu-content>
  </md-menu>
</md-menu-bar>

I am doing something like the above, but unfortunately, if I click on the menu, it remains open, even if I press other buttons.

I just want it to have the same behavior as

https://material.angularjs.org/latest/demo/menuBar

PS If I do not use ng-repeat (this means the menus are static), it works fine, though.

Codepen Problem

Answer 1

I just came across this question and noticed that the link published by S. Klechkovsky has a workaround made by christrude. This is not ideal (as other users have pointed out), but at least it works. You can also post it here.

$mdMenu hide , .

$scope.closeOthers = function() {
  $mdMenu.hide(null, { closeAll: true });
}

HTML

<button ng-click="closeOthers();$mdOpenMenu()">File</button>

Codepen. , .

. , Github ( ), - .

;) frankenstein promises , .

<button ng-click="closeOthers().then($mdOpenMenu);">File</button>

var lock = false;

$scope.closeOthers = function() {
  if(lock) {
    return;
  }

  var defer = $q.defer()
  lock = true;

  $mdMenu.hide(null, { closeAll: true }).then(function() {
    lock = false;
    defer.resolve();
  });

  return defer.promise;
}

Answer 2

! , , . issue. , .

:

Codepen, .

, - md-menu $scope. $emit $mdMenuOpen md-menu. $emit , , . , md- . , , ng-repeat .

Answer 3

The only reliable workaround I found was

$scope.forceCloseMenu = function () {
    $('.md-open-menu-container').hide();
    $('.md-menu-backdrop').remove();
    $('.md-scroll-mask').remove();
};

And calling forceCloseMenu () every time you click a menu item.

Note. It also requires jQuery.