Interface utilisateur mobile angulaire - externalClick

Selon le nom Outerclick, cela aide à ajouter un comportement basé sur le clic / tap qui se produit en dehors de l'élément html. Il est surtout utile de fermer les listes déroulantes qui sont ouvertes lorsque vous cliquez en dehors de la zone déroulante.

Le sous-module principal externalClick est fourni avec deux directives importantes appelées ui-external-click et ui-external-click-if .

Prenons un exemple -

Nous ajouterons les modifications dans 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>

Utilisez ui-external-click lorsque l'événement de clic externe se produit. Vous pouvez également appeler une fonction pour faire quelque chose de spécifique selon votre projet. Utilisez le paramètre Use ui-external-click-if pour activer / désactiver l'écouteur.

Nous avons une liste de tutoriels affichés dans la liste déroulante. La sortie à l'écran est la suivante -