2016-05-22 6 views
0

Ich versuche ein Dropdown-Menü mit onmouseover und onmouseout zu öffnen.onmouseover und onmouseout Fehler Funktion ist nicht definiert

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

Mein Javascript hat den folgenden 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'); 
}; 

Aber jedes Mal wenn ich die Maus über die Links es mir ein Uncaught ReferenceError: openDropdownMenu is not defined und das gleiche mit closeDropdownMenu Funktion geben würde.

Ich habe versucht:

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

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

Aber ich möchte in der Lage, die Parameter-ID zu ändern, so kann ich die gleiche Funktion mehr als einmal verwenden, da ich mehr als ein Drop-Down haben.

Kann mir jemand über diesen Fehler aufklären? Vielen Dank.

+0

Sie könnten stattdessen jQuery verwenden ... – xdevs23

+0

Was ist '$ rootScope'? –

Antwort

0

Verwenden ngMouseover und ngMouseleave statt

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

Die Funktionen sind nur verfügbar, wenn sie innerhalb eines Winkels Bereich ausgewertet.

+0

Danke! Dies ist einer jener Momente, in denen ich mir nur den Kopf für diesen dummen Fehler schlagen will. :-) –

Verwandte Themen