我发布我的代码,因为为了我,我无法弄清楚为什么 ng-mouseenter 和 ng-mouseleave 不能正常工作......它们只有在鼠标进入和离开时才会正确触发侧(左/右)和 mouseleave 仍然有时它不会启动..我不能使用 css 来应用所需的类,因为我必须注意 ctrl 按键事件,所以我必须坚持ng-mouseenter/离开。我也尝试过 ng-mouseover/out - 他们几乎根本不工作。知道为什么会这样以及如何解决它吗?我将不胜感激。
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
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
.hidden-shortcut {
display: none;
}
.current-shortcut {
display: block !important;
}
最佳答案
当我在 Angularjs 中使用 JQuery 时,出现了几个问题。
看到很多前辈推荐不要用JQuery搭配Angularjs
,
所以我会推荐一个。
希望对您有所帮助。 :)
检查这个 fiddle 。
myApp.controller('MyController', function($scope){
$scope.colorClass = 'red-div';
$scope.changeClass = function (css) {
$scope.colorClass = css;
};
});
也许这与您的目的不一样。
但如果您需要更多信息,请给我一些反馈。 :)
关于javascript - AngularJS - 为什么 ng-mouseleave 不能正常工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46823152/