[英]AngularJS - Why is ng-mouseleave not woking properly?
I'm posting my code, because for the sake of me, I can't figure out why ng-mouseenter and ng-mouseleave are not working properly... They fire correctly only when the mouse enters and leaves from the side(left/right) and with the mouseleave still sometimes it doesn't fire up.. I can't use css to apply the needed classes, because I have to watch for a ctrl key press event, so I have to stick to the ng-mouseenter/leave. 我正在发布代码,因为为了我自己,我不知道为什么ng-mouseenter和ng-mouseleave无法正常工作...仅当鼠标从侧面进入和离开时,它们才能正确触发/ right),有时仍然无法启动。.我不能使用CSS来应用所需的类,因为我必须注意ctrl键的按下事件,因此我必须坚持使用ng-的mouseenter /离开。 I tried also with ng-mouseover/out - they're almost not working at all.
我也尝试了ng-mouseover / out-它们几乎根本无法工作。 Any idea why that is and how to fix it?
知道为什么会这样以及如何解决吗? I would be very thankful.
我将非常感谢。
view.html view.html
<div ng-controller="ControlCenterViewController as controlCenter">
<div class="controlcenter" ng-repeat="cat in controlCenter.categories">
<div class="controlcenter-category">{{cat.title}}</div>
<div class="controlcenter-shortcut" ng-repeat="shortcut in cat.exts"
ng-click="controlCenter.onSelect(shortcut, $event)" ng-class="class"
ng-mouseenter="controlCenter.hoverIn($event, shortcut)" ng-mouseleave="controlCenter.hoverOut($event, shortcut)">
<span class="shortcut-remove hidden-shortcut">
<clr-icon shape="times-circle" class="is-error" size="12"></clr-icon>
</span>
<span class="{{shortcut.icon}} controlcenter-shortcut-icon-display" ng-if="controlCenter.hasClass(shortcut)"></span>
<img class="controlcenter-shortcut-icon" ng-src="{{shortcut.icon}}" ng-if="!controlCenter.hasClass(shortcut)"/>
<div data-test-id="{{shortcut.targetViewUid}}" class="controlcenter-shortcut-label">{{shortcut.name}}</div>
</div>
</div>
</div>
controller.js controller.js
function hoverIn(event, shortcut){
if(perspectivesService.isEditEnabled()){
console.log('hover in fired');
var target = angular.element(event.target).find('span.shortcut-remove');
if(event.ctrlKey){
target.removeClass('hidden-shortcut');
target.addClass('current-shortcut');
}
}
}
function hoverOut(event, shortcut){
if(perspectivesService.isEditEnabled()){
console.log('hover out fired');
var target = angular.element(event.target).find('span.shortcut-remove');
target.removeClass('current-shortcut');
target.addClass('hidden-shortcut');
}
}
css CSS
.hidden-shortcut {
display: none;
}
.current-shortcut {
display: block !important;
}
When I used JQuery in Angularjs, there were several problems. 当我在Angularjs中使用JQuery时,存在几个问题。
I've seen so many seniors recommended Do not use JQuery with Angularjs
, 我见过很多老年人建议
Do not use JQuery with Angularjs
,
so I'll suggest one. 所以我建议一个。
I hope this can help you. 希望对您有所帮助。 :)
:)
Check this fiddle. 检查这个小提琴。
myApp.controller('MyController', function($scope){
$scope.colorClass = 'red-div';
$scope.changeClass = function (css) {
$scope.colorClass = css;
};
});
Maybe this is not same as your purpose. 也许这与您的目的不同。
But if you want more information, please give me some feedback. 但是,如果您需要更多信息,请给我一些反馈。 :)
:)
您可以将JQuery与Angularjs结合使用,但必须将jQuery的$符号设置为jQuery。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.