Interfaz de usuario angular móvil - externalClick

Según el nombre Outerclick, ayuda a agregar un comportamiento basado en hacer clic / tocar que ocurre fuera del elemento html. Es sobre todo útil cerrar los menús desplegables que están abiertos cuando se hace clic fuera del área desplegable.

El submódulo central externalClick viene con dos directivas importantes llamadas ui-external-click y ui-outer-click-if .

Echemos un vistazo a un ejemplo:

Agregaremos los cambios en 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>

Utilice ui-external-click para cuando ocurra el evento Outer Click. También puede llamar a una función para hacer algo específico según su proyecto. Utilice el parámetro Use ui-external-click-if para habilitar / deshabilitar el oyente.

Tenemos una lista de tutoriales que se muestra en el menú desplegable. La salida en la pantalla es la siguiente:

↰ Previous page