Sophia Sophia - 6 months ago 70
AngularJS Question

onmouseover and onmouseout error function is not defined

I am trying to open a dropdown-menu using onmouseover and onmouseout.

<div id="adminDropdown" class="dropdown" dropdown>
<a onmouseover="openDropdownMenu('adminDropdown')"
onmouseout="closeDropdownMenu('adminDropdown')">
Admin
</a>
<ul class="dropdown-menu" role="menu">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</div>
<div id="userProfile" class="dropdown" dropdown>
<a onmouseover="openDropdownMenu('userProfile')"
onmouseout="closeDropdownMenu('userProfile')">
Username
</a>
<ul class="dropdown-menu" role="menu">
<li><a>Submenu 1</a></li>
<li><a>Submenu 2</a></li>
</ul>
</div>


My javascript has the following code:

$rootScope.openDropdownMenu = (id: string) => {
var dropdown = document.getElementById(id);
dropdown.classList.add('open');
};

$rootScope.closeDropdownMenu = (id: string) => {
var dropdown = document.getElementById(id);
dropdown.classList.remove('open');
};


But everytime I mouse over the links it would give me a
Uncaught ReferenceError: openDropdownMenu is not defined
and the same with closeDropdownMenu function.

I have tried:

$rootScope.dropdown = document.getElementById('adminDropdown');
$rootScope.dropdown.addEventListener("mouseover", () => {
$rootScope.dropdown.classList.add('open');
});

$rootScope.dropdown.addEventListener("mouseout", () => {
$rootScope.dropdown.classList.remove('open');
});


But I want to be able to change the parameter id so I can use the same function more than once as I have more than one dropdown.

Can someone enlighten me on this error? Thanks.

Answer

Use ngMouseover and ngMouseleave instead

<a ng-mouseover="openDropdownMenu('adminDropdown')"
   ng-mouseleave="closeDropdownMenu('adminDropdown')">
    ...
</a>

The functions will only be available when evaluated inside an angular scope.

Comments