2016-05-22 5 views
0

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

Мой 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 и то же самое с функцией 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 ... – xdevs23

+0

Что такое '$ rootScope'? –

ответ

0

Используйте ngMouseover и ngMouseleave вместо

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

функция будет доступна только тогда, когда оцениваются внутри угловой области.

+0

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

Смежные вопросы