CODEWITHSUNDEEP
javascriptjqueryangularjsangularjs-directive
George Bora
George Bora

Reputation: 1650

Angular directive for simulating a mouseenter?

Is there a directive for simulating a mouseenter event ?

I've tried searching for one but all I've found is the directive which binds a function to the mouse over or karma tests for simulating mouse over.

My use case is that I all ready have a event binded to mouse over but I'm looking for a directive in the form of simulate-mouse ="shouldBeMouseOver" such that when $scope.shouldBeMouseOver is true the element I place the directive on reacts as if it has mouseenter event.

Upvotes: 0

Views: 437

Answers (1)

Herbi Shtini
Herbi Shtini

Reputation: 2040

UPTATE! Previous solution was a workaround. You can now use an angular directive for that(https://docs.angularjs.org/api/ng/directive/ngMouseenter).

ng-mouseenter="handler()"

Previous solution (workaround)

HTML:

    <div simulate-mouse eventhandle="objfromscope">Hover</div> <!-- objfromscope: true or false -->
   <div ng-click="objfromscope=!objfromscope">Enable/Disable hover</div>

Directive

app.directive('simulateMouse', function() {
    return {
        restrict: 'AE',
        scope: {
            eventhandle : '=eventhandle' //eventhandle is two way data binded
        },
        link: function(scope, element, attrs) {
            
            scope.$watch(function() {
                    return scope.eventhandle;
                }, function(newValue) {
                    console.log(newValue)
                  if(newValue){
                     element.off("mouseenter").on("mouseenter",function(){
                           onMouseOverCall()
                        });
                }else{
                    element.off("mouseenter");
                }

                });
           
           var onMouseOverCall = function(){ /* called only when eventhandle is true */
               console.log("hoho") 
           }
        }
    };
});

Upvotes: 2

Related Questions