Shikha thakur Shikha thakur - 3 months ago 11
Javascript Question

mouse leave not working properly

I have a scenario where when i mouse enter on some text i need to get an input box and text should hide and when i leave the text box the box should hide and i should show the text back

but this is not happening


<div ng-app>
<div ng-controller="showCrtl">
<div ng-hide="showme">
<p ng-mouseenter="showme=!showme">
mouse enter
<input type="search" ng-if="showme" ng-mouseleave="showme=false">


function showCrtl($scope){

Here is what i have tried DEMO

Any help is appreciated.


The problem is you had primitive value on ng-if directive, You know ng-if does create child scope whenever it renders that element on DOM. To resolve this issue what I'd suggest you to do is, just follow Dot Rule by defining new object. And then define all the property which you want to use inside that object.

If you want do dig deeper how scope inheritance work, you can refer to this answer.

So in your code, you should define an object suppose i.e. $scope.model = {} and then have showme property inside that object itself. And wherever you use showme on view replace that with model.showme.

Demo Fiddle

More convenient way to resolve such kind of scope inheritance issue is, you could use controllerAs pattern. In that you don't use $scope inside controller, you just place with controller context this. While using controller on view you need to create it alias and when you want to get variable value you can use variable reference.