CODEWITHSUNDEEP
angularjs
prashanth
prashanth

Reputation: 85

How to create custom directives for mouseover and mouseleave in angularjs

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

Upvotes: 1

Views: 5621

Answers (1)

J-D
J-D

Reputation: 1575

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

Upvotes: 8

Related Questions