Question

我的目标非常简单。图像上会有一个show-overlay指令。如果输入鼠标，它将使用父跨度换行并附加叠加。在mouseleave上，它将删除父span和overlay 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;

}

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

2 个答案: