Interfaccia utente angolare mobile - outerClick

Secondo il nome Outerclick aiuta ad aggiungere un comportamento basato sul clic / tocco che avviene al di fuori dell'elemento html. È principalmente utile chiudere i menu a discesa aperti quando si fa clic al di fuori dell'area a discesa.

Il modulo secondario principale outerClick viene fornito con due importanti direttive chiamate ui-outer-click e ui-outer-click-if .

Diamo un'occhiata a un esempio:

Aggiungeremo le modifiche in src / home / home.html.

<div class="list-group text-center">
   <div class="list-group-item list-group-item-home">
      <h1>{{msg}}</h1>
   </div>
   <div class="list-group-item list-group-item-home">
      <div class="btn-group">
         <a ui-turn-on='testDropdown' class='btn'>
            <i class="fa fa-caret-down" aria-hidden="true"></i>Tutorials
         </a>
         <ul
            class="dropdown-menu"
            ui-outer-click="Ui.turnOff('testDropdown')"
            ui-outer-click-if="Ui.active('testDropdown')"
            role="menu"
            ui-show="testDropdown"
            ui-state="testDropdown"
            ui-turn-off="testDropdown">
            <li><a>PHP</a></li>
            <li><a>JAVA</a></li>
            <li><a>MYSQL</a></li>
            <li class="divider"></li>
            <li><a>PYTHON</a></li>
         </ul>
      </div>
   </div>
</div>

Utilizza il clic esterno per quando si verifica l'evento Clic esterno. Puoi anche chiamare una funzione per fare qualcosa di specifico secondo il tuo progetto. Usa il parametro Usa ui-outer-click-if per abilitare / disabilitare l'ascoltatore.

Stiamo visualizzando un elenco di tutorial nel menu a discesa. L'output sullo schermo è il seguente: