How to create custom directives for mouseover and mouseleave in angularjs

Question

I want to create custom directives instead of ng-mouseover and ng-mouseleave, since ng-mouseleave didnt work in chrome.

My requirement is when i mouseover, a popover should appear and when I mouseleave, it should close. The close functionality is not closing in few situations in chrome(the frequency of popover closing is inconsistent).

<div class="eleCalc" ng-mouseover="calcPopOver(i)" id="term{{i.Id}}" ng-mouseleave="hidePopOvers()">
                    {{calcNumbers(i)}}
</div>

calcPopOver function opens popup and hidePopOvers() closes.

Please help to create new directive.

Thanks

Have you searched for other people with this issue? I found this immediately, does it fix your issue? stackoverflow.com/questions/27687002/… — Ben Heymink
– Ben Heymink, Commented Oct 26, 2015 at 11:50
The issue might be something else because those two directives usually work in all common browsers. I would investiage the casue for this instead of implementing custom ones. — LordTribual
– LordTribual, Commented Oct 26, 2015 at 11:56
@BenHeymink Thanks for your reply. I know about this but it looks like client doesn't want to do settings in chrome. So I have to bring up new approach for the above. Can you help me? — prashanth
– prashanth, Commented Oct 26, 2015 at 11:58
@LordTribual This is something to do with settings in chrome. So, I am trying to build a new approach for the same functionality. — prashanth
– prashanth, Commented Oct 26, 2015 at 11:59

J-D · Accepted Answer · 2015-11-02 12:06:51Z

8

Yes you can use custom directive like below to achieve the functionality you want.

app.directive('domDirective', function () {
      return {
          restrict: 'A',
          link: function ($scope, element, attrs) {
              element.on('click', function () {
                  element.html('You clicked me!');
              });
              element.on('mouseenter', function () {
                  element.css('background-color', 'yellow');
              });
              element.on('mouseleave', function () {
                  element.css('background-color', 'white');
              });
          }
      };
  });

The working code pen for same is as below.

CodePen

For more detail on custom directive like this visit below link.

weblogs.asp.net

edited Nov 2, 2015 at 12:06

answered Oct 26, 2015 at 12:04

J-D

1,5751 gold badge11 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

prashanth Over a year ago

Thanks for your answer. I want On mouseenter, i need to call calcPopover(i) function. which creates a popup with data.and On mouseleave, I need to call hidepopovers() to close the popovers.

Collectives™ on Stack Overflow

How to create custom directives for mouseover and mouseleave in angularjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related