Как создать пользовательские директивы для mouseover и mouseleave в angularjs

Question

Я хочу создать пользовательские директивы вместо ng-mouseover и ng-mouseleave, так как ng-mouseleave не работал в chrome.

Мое требование - когда я наведите курсор мыши, появится popover и когда я пойду, он должен закрыть. Близкая функциональность не закрывается в нескольких ситуациях в хроме (частота закрытия popover несовместима).

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

функция calcPopOver открывает всплывающие и hidePopOvers() закрывает.

Пожалуйста, помогите создать новую директиву.

Благодаря

Answer 1

Да, вы можете использовать пользовательские директивы, как показано ниже, чтобы обеспечить функциональность вы хотите.

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'); 
       }); 
      } 
     }; 
    }); 

Рабочий код пера такой же, как показано ниже.

CodePen

Более подробной информации о пользовательской директиве, как этот визит ссылки ниже.

weblogs.asp.net