onmouseover和onmouseout错误函数未定义

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

我正在尝试使用onmouseover和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:

我的javascript有以下代码:

$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.

但每当我将鼠标悬停在链接上时,它会给我一个未捕获的ReferenceError:未定义openDropdownMenu,并且与closeDropdownMenu函数相同。

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.

但我希望能够更改参数ID,因此我可以多次使用相同的功能,因为我有多个下拉列表。

Can someone enlighten me on this error? Thanks.

有人可以告诉我这个错误吗?谢谢。

1 个解决方案

#1

Use ngMouseover and ngMouseleave instead

请改用ngMouseover和ngMouseleave

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

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

只有在角度范围内进行评估时,才能使用这些功能。

#1