Функция ошибки onmouseover и onmouseout не определена

0

Я пытаюсь открыть раскрывающееся меню, используя 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>

У моего 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');
};

Но каждый раз, когда я Uncaught ReferenceError: openDropdownMenu is not defined на ссылки, это дало бы мне Uncaught ReferenceError: openDropdownMenu is not defined и тот же с функцией closeDropdownMenu.

Я пытался:

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

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

Но я хочу иметь возможность изменять идентификатор параметра, поэтому я могу использовать одну и ту же функцию более одного раза, поскольку у меня есть более одного раскрывающегося списка.

Может кто-нибудь просветить меня по этой ошибке? Благодарю.

  • 0
    Вы можете использовать вместо этого jQuery ...
  • 0
    Что такое $rootScope ?
Теги:

1 ответ

0
Лучший ответ

Вместо этого используйте ngMouseover и ngMouseleave

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

Функции будут доступны только при оценке внутри угловой области.

  • 0
    Спасибо! Это один из тех моментов, когда я просто хочу ударить себя по голове за эту глупую ошибку. :-)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню