AngularJS - Fire a function on ng-init=true

Question

Hi I have the following code:

html:

<div class="portlet-titlebar"
  ng-click="toggleCollapsed(portlet, $event)"
  ng-class="{current: hover}"
  ng-init="hover = false"
  ng-mouseenter="hover = hoverIn()"
  ng-mouseleave="hover = false">
  <span class="arrow">
    <svg height="20" viewBox="0 0 32 32" width="20"><path d="M16.7 11.3c-0.4-0.4-1-0.4-1.4 0l-9 9c-0.4 0.4-0.4 1 0 1.4 0.4 0.4 1 0.4 1.4 0L16 13.4l8.3 8.3c0.4 0.4 1 0.4 1.4 0 0.4-0.4 0.4-1 0-1.4L16.7 11.3z" fill="#121313"/></svg>
  </span>
  <span class="titlebar-text" title="{{portlet.title}}">{{portlet.title}}</span>
</div>

inside the angularJS directive:

scope.hoverIn = function(){
    if(event.ctrlKey){
        return true;
    }
    return false;
}

I'm using less for the styling, so inside my less file I have:

.current{
    border: 1px solid red;
}

Now what I'm trying to do is: on mouseover + crtl key pressed, I want to change the span class="arrow" icon to another icon and then on click on the icon (while ctrl is still pressed) fire another function. Anybody know what is the best approach to this, as I tried to handle the hover like so, but it didn't work:

document.element.getElementsByClassName('portlet-titlebar').hover(function () {
    $(this).toggleClass('current');
});
$(document).keypress(function (e) {
    if (e.which == 17) {
        $('.current').remove();
    }
});

but for some reason it doesn't work..

Answer 1

您有JavaScript事件.onmouseover ，我认为它将完成工作