AngularJs <md-menu-content> не закрывается при нажатии вне меню - PullRequest
Новая
       51

AngularJs <md-menu-content> не закрывается при нажатии вне меню

0 голосов
/ 01 сентября 2018

Я реализовал угловое меню js, ссылаясь на эту статью , и мой пункт меню также содержит подменю. Когда я удерживаю мышь над элементом меню, открывается подменю, но когда я перемещаю мышь к другому элементу меню или когда я щелкаю в другом месте окна (кроме области меню), элемент подменю не закрывается.

Когда я двигаю мышью по пункту меню

When I click on the menu item

Когда я выхожу наружу из пункта меню

When I click out side the menu item

Вот код для меню 

<md-list-item>
     <md-menu md-position-mode="cascade" >
          <a class="w3-button w3-block w3-flat-clouds w3-left-align menu-button" ng-href="#/register" style="vertical-align: middle"  href="#/register" ng-mouseenter="$mdOpenMenu()"  >
              <md-icon ><i class="material-icons">&#xE8A6;</i></md-icon> 
              <span >Account</span>
          </a>

         <md-menu-content width="4" style="top:64px"  md-autofocus="true">
               <md-menu-item ng-repeat="item in [1, 2, 3]"   >
                     <md-button >Account {{item}}</md-button>
               </md-menu-item>
         </md-menu-content>
     </md-menu>
</md-list-item>

может кто-нибудь сказать мне причину этого поведения или что я пропустил?

1 Ответ

0 голосов
/ 03 сентября 2018

Проверьте это! 

angular.module('myApp', ['ngMaterial']);
<head>
  <link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
  <script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>
  <div ng-app="myApp" ng-cloak>
    <md-menu-bar>
      <md-menu>
        <button class="md-button md-raised md-default" ng-click="$mdOpenMenu()">
              Menu
            </button>
        <md-menu-content>
          <md-list-item>
            <md-menu md-position-mode="cascade">
              <a class="w3-button w3-block w3-flat-clouds w3-left-align menu-button" ng-href="#/register" style="vertical-align: middle" href="#/register" ng-mouseenter="$mdOpenMenu()">
                <md-icon><i class="material-icons">&#xE8A6;</i></md-icon>
                <span>Account</span>
              </a>

              <md-menu-content width="4" style="top:64px" md-autofocus="true">
                <md-menu-item ng-repeat="item in [1, 2, 3]">
                  <md-menu>
                    <md-button>Account {{item}}</md-button>
                  </md-menu>
                </md-menu-item>
              </md-menu-content>
             
          </md-list-item>

        </md-menu-content>
        </md-menu>
    </md-menu-bar>
  </div>
</body>
...