Угловая замена в директиве и мыши/мышеловке

Question

Моя цель довольно проста. На изображениях будет отображаться директива show-overlay. Если вы введете мышь, она будет завершена с родительским интервалом и добавит оверлей. На mouseleave он удалит родительский диапазон и оверлей div. Но по какой-то причине, если я использую replaceWith на mouseleave, это приводит к непредвиденному срабатыванию mouseenter несколько раз для следующего входа.

директива как ниже

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

Из приведенного выше кода, выглядит ReplaceWith вызывает $ элемент иметь несколько событие MouseEnter. jsfiddle здесь: http://jsfiddle.net/RmDuw/979/

Answer 1

Могу ли я предложить этот более эффективный подход (с использованием CSS :hover вместо JS), чтобы достичь того же:

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

дополнительный CSS

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

jsfiddlehttp://jsfiddle.net/0aj5osw0/

Answer 2

Вот решение

HTML код

<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; 

}