angularjs - Angular replacewith in directive and mouseenter/mouseleave -
my target pretty simple. there show-overlay directive on images. if enter mouse, wrap parent span , append overlay. on mouseleave remove parent span , overlay div. reason if use replacewith on mouseleave causes fire mouseenter unexpectedly multiple times next enters.
the directive 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 above code, looks replacewith causes $element have multiple mouseenter event. jsfiddle here: http://jsfiddle.net/rmduw/979/
may suggest more efficient approach (using css :hover instead of js) achieve 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/
Comments
Post a Comment