CODEWITHSUNDEEP
angularjsangular-material
Egert Aia
Egert Aia

Reputation: 469

Two mouseevents on the same button angular

I am working on a project where there is required that the menu, which i have built by md-menu will do two functions on the same button.

Firstly it is that, once you click on the button, something happens, but also when you hover over it, it will open up the dropdown.

<md-menu-bar md-selected-nav-item="$ctrl.currentNavItem" md-no-ink-bar="$ctrl.landingPage" md-theme="reverse" aria-label="Main menu">
<md-menu ng-repeat="item in $ctrl.menuItems track by item.id">
    <md-button ng-mouseover="$mdMenu.open()" ng-click="$ctrl.menuClick(item)">{{::item.name}}</md-button>
    <md-menu-content ng-show="item.sub.length > 0">
        <md-menu-item ng-repeat="subitem in item.sub">
            <md-button ng-click="$ctrl.menuClick(subitem)">
                {{::subitem.name}}
            </md-button>
        </md-menu-item>
    </md-menu-content>
</md-menu>

Is this even possible, or am I trying to solve something that's not even solvable?

Upvotes: 0

Views: 75

Answers (1)

troig
troig

Reputation: 7212

Not sure if I've understood you correctly, but I think you can achieve it playing a litle bit with $timeout instead of opening the menu directly in ng-mouseover. It's just one choice.

Here you have a working example.

Code, just for reference. See the plunker for the complete details:

this.openMenu = function($mdMenu, ev) {
  $timeout(function() {
    if ($scope.openWhenHover) {
      originatorEv = ev;
      $mdMenu.open(ev);
    }
  }, 1000);
};


this.clickButton = function() {
  $scope.clickedButton = true;
  $scope.openWhenHover = false;
  $timeout(function() {
    $scope.clickedButton = false;
    $scope.openWhenHover = true;
  }, 1500);
};

Hope it helps

Upvotes: 1

Related Questions