Javascript Girl
  1. Javascript Girl
  3. AngularJS – Acceptez un ui.bootstrap modal avec la touche ENTER
Intereting Posts
Console JavaScript interactive (de préférence intégrée à Firebug) Comment éviter de plusieurs déclarations de variables sur les sorties de la fonction en JavaScript Regarder plusieurs attributs de portée $ Comment convertir efficacement THREE.Geometry en ArrayBuffer, File ou Blob? Convertir base64 string en image avec javascript Comment simplifier une décimale dans la plus petite fraction possible? Regex pour faire correspondre le retour chariot en Javascript Escape / Special Characters from user input to HTML5 data-attributes using URL Encode / Decode Comment puis-je obtenir un nombre de champs dans l'objet JavaScript? Sélectionnez le texte dans javascript Est-il possible de créer une fonction javascript définie par l'utilisateur en sqlite Incertain pourquoi la variable est indéfinie. Problème de portée possible? La boîte de dialogue Permissions d'emplacement actuelle d'iOS est affichée deux fois dans l'application Phonegap Supprimez le champ de texte si la valeur dans la source de données est vide? Impossible de définir la propriété '_renderItem' de l'interface utilisateur jQuery indéfinie automatiquement avec HTML

AngularJS – Acceptez un ui.bootstrap modal avec la touche ENTER

Le problème:
J'ai été incapable d'accepter une fenêtre modal avec la touche ENTRÉE

J'ai modifié le plongeur par défaut pour vous montrer ce que j'ai fait depuis maintenant -> ici

Ce que j'ai:
En bref, la touche ENTRÉE est reconnue par le modal, mais elle ne déclenche pas ma fonction (problèmes de portée, je soupçonne).

La mauvaise partie est que je devais modifier le template/modal/window , que je serais volontairement laissé intact, si possible.

Ce que j'adorerais
J'aimerais simplement mettre la directive ng-enter dans mon modal, sans modifier le modèle par défaut

Supplémentaire
J'ai également essayé d'ajouter l'événement 13 à la directive modal , mais je ne pouvais pas passer un résultat dans le modal.close , alors j'ai abandonné cette route

Toute pensée?

Le soutien de AngularJS est par défaut.

Ajoutez une <form> dans votre modèle (modal.html) et ajoutez la directive ng-submit par exemple 

 <form name="questionForm" ng-submit="ok()"> <div class="modal-header"> <h3 class="modal-title">{{title}}</h3> </div> // the rest of the code here </form>

Vérifiez mon plongeur . Vous devez ajouter ng-enter au bouton "OK". 

 <button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>

Peut-être que vous cherchez quelque chose de plus générique, je n'en suis pas sûr. Ensuite, vous pourriez considérer les observateurs. Mais personnellement, je trouve cela mieux car nous n'avons aucun observateur constant qui écoute l'événement modal.

J'ai trouvé qu'il est plus simple d'ajouter le gestionnaire d'événements enter dans le contrôleur du modal: 

 var text = "This is the text in the modal"; var modalPromise = $modal.open({ template: '<div class="modal-body">' + '<button class="close" ng-click="$dismiss(\'×\')">×</button>'+ '<h3 ng-bind="body"></h3>'+ '</div>'+ '<div class="modal-footer">'+ '<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+ '<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+ '</div>', controller: function ($scope, $document) { $scope.body = text; var EVENT_TYPES = "keydown keypress" function eventHandler(event) { if (event.which === 13) { $scope.$close('ok'); } } $document.bind(EVENT_TYPES, eventHandler); $scope.$on('$destroy', function () { $document.unbind(EVENT_TYPES, eventHandler); }) } }).result;