Oliver Watkins Oliver Watkins - 7 months ago 37
Javascript Question

How to make a simple menu navigation in angularjs

I'm not really satisfied with what I can find. I just want a simple example of a menu system in Angularjs with hover effect and selection effect.

I understand that 'hover' effects can be done in CSS, but this is more of an exercise for me to understand angularjs better.

What I am trying to do is pretty basic stuff.

Basically I have some HTML which has some DIVs (or menu items) :

<div NavCtrl id="header">
<div class="item" ng-click="click(1)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
1
</div>
<div class="item" ng-click="click(2)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
2
</div>
<div class="item" ng-click="click(3)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
3
</div>
</div>


I want to do two things.


  • listen on click

  • listen on mouseIn and mouseOut



I understand..


  1. It is probably nicer to do the hover effect in CSS

  2. It is possible to do some inline logic in the HTML with angularjs



...because I want to have flow on effects from these events. A hover event needs to pull information out related to that menu item, and a click event should also be able to perform some action related to that menu item. Cheap CSS tricks are not going to solve this!

For my hover logic, I thought this would do the trick :

$scope.hoverIn = function($event){
angular.element($event.srcElement).addClass('hover')
};

$scope.hoverOut = function($event){
angular.element($event.srcElement).removeClass('hover')
};


However $event is undefined :( . How do I get to the element object from a mouseover event?

My click logic looks like this :

$scope.click = function(position, $event) {

elem = angular.element($event.srcElement);

if (elem.hasClass("clicked")) {
elem.removeClass("clicked")
}else {
elem.addClass("clicked")
}

// if (position == 1) //do something etc...
};


Same problem : $event is undefined. I also want to pass in the index, so that I can do something special for certain menu items.

My Fiddle is here :

https://jsfiddle.net/zxjg3tpo/5/

Answer

In angularjs you can get the event by using $event in your html code

<div class="item" ng-click="click(1,$event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">

Hover Logic

 $scope.hoverIn = function($event){
    angular.element($event.target).addClass('hover')
  };

  $scope.hoverOut = function($event){
    angular.element($event.target).removeClass('hover')
  };

Click logic

$scope.click = function(position, $event) {

    elem = angular.element($event.target);

    if (elem.hasClass("clicked")) {
      elem.removeClass("clicked")
    }else {
      elem.addClass("clicked")
    }

    // if (position == 1) //do something etc...
  };

Updated Fiddle : https://jsfiddle.net/zxjg3tpo/6/

Here is another updated Fiddle where the siblings have their class removed (to make the click work correct) https://jsfiddle.net/zxjg3tpo/9/