0

My target is pretty simple. There will be an show-overlay directive on images. If you enter mouse, it will wrap with a parent span and append overlay. On mouseleave it will remove the parent span and overlay div. But for some reason if I use replaceWith on mouseleave it causes to fire the mouseenter unexpectedly multiple times for the next enters.

The directive as is below

app.directive('showOverlay', function($compile) {
    return {
        restrict: 'A',
        link: function($scope, $element, attrs) {

            $element.on('mouseenter', function (e) {
                console.warn('mouseenter');
                $el = $element.wrap("<span class='img'></div>")
              $el = $el.parent().append("<div  ng-mouseleave='cancelEditMode($event)' class='overlay'></div>");
                $element.parent().addClass("hover");
              var inputElem = $element.parent();
              $compile(inputElem)($scope);
            });

            $scope.cancelEditMode = function(e) {
                $element.parent().replaceWith($element);
            };
        }
    };
});

From the above code, looks like the replacewith causes $element to have multiple mouseenter event. jsfiddle is here: http://jsfiddle.net/RmDuw/979/

ngCoder
  • 2,095
  • 1
  • 13
  • 22
masum7
  • 822
  • 6
  • 17

2 Answers2

0

May I suggest this more efficient approach (using CSS :hover instead of JS) to achieve the same thing:

JS

app.directive('showOverlay', function($compile) {
    return {
        restrict: 'A',
        link: function($scope, $element, attrs) {
            $el = $element.wrap("<span class='img hover'></div>")
            $el = $el.parent().append("<div class='overlay'></div>");
        }
    };
});

additional CSS

.img .overlay {
  display: none;
}
.img:hover .overlay {
  display: block;
}

jsfiddle http://jsfiddle.net/0aj5osw0/

elfan
  • 1,131
  • 6
  • 11
  • Thanks elfan, but the problem is that I cannot leave the dom with some extra element, which was not originally there. What I mean, I must remove the extra elements like span, orverlay div at the end. – masum7 Nov 06 '16 at 08:40
0

Here is the solution

html code

<div ng-controller="MyCtrl" >
 <overlay   class='overlay'></overlay>
 <img show-overlay src="http://www.queness.com/resources/images/png/apple_raw.png" />
</div>

javascirpt

app.directive('showOverlay', function($compile) {
return {
    restrict: 'A',
    link: function($scope, $element, attrs) {
       $element.bind('mouseenter', function() {
             angular.element('overlay').addClass('showContent')
        })  
        angular.element('overlay').bind('mouseleave', function() {
             angular.element('overlay').removeClass('showContent')
        })

    }
 };
});

css

 [editable]:hover {
    cursor: pointer;
    border: dotted thin rgba(0, 191, 255, 0.5);
}

.img {
  position: relative;
  margin-bottom: 5px;
  overflow: hidden;

}
.overlay {
  position: absolute;
  z-index: 20;
  width:400px;
  height: 400px;
  background-color:red;
  display: none;
}
.showContent{
  display: block;
   z-index: 20;

}
.hideContent{
  display: none;
  z-index: 0;

}
Rubel hasan
  • 2,522
  • 1
  • 13
  • 22