指令和 mouseenter/mouseleave 中的角度替换

Question

我的目标很简单。图像上会有一个 show-overlay 指令。如果您输入鼠标，它将用父跨度包装并附加覆盖。在 mouseleave 上，它将删除父跨度和覆盖 div。 但是由于某种原因，如果我在 mouseleave 上使用 replaceWith 会导致下一次进入时意外触发 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 导致 $element 有多个 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;
}

jsfiddle http://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;

}