J'essaie d'installer une boîte de dialogue de confirmation sur un ng-click
utilisant une directive angularjs personnalisée:
app.directive('ngConfirmClick', [ function(){ return { priority: 1, terminal: true, link: function (scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.ngClick; element.bind('click',function (event) { if ( window.confirm(msg) ) { scope.$eval(clickAction) } }); } }; }])
Cela fonctionne génial mais malheureusement, les expressions à l'intérieur de l'étiquette utilisant ma directive ne sont pas évaluées:
<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>
(Le nom n'est pas évalué est le cas). Cela semble être dû au paramètre terminal de ma directive. Avez-vous des idées de contournement?
Pour tester mon code: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview
Si cela ne vous dérange pas d'utiliser ng-click
, ça marche OK. Vous pouvez simplement le renommer à autre chose et lire toujours l'attribut, tout en évitant que le gestionnaire de clics ne soit déclenché à deux reprises qu'il y a actuellement un problème.
http://plnkr.co/edit/YWr6o2?p=preview
Je pense que le problème est que le terminal
indique aux autres directives de ne pas s'exécuter. La liaison de données avec {{ }}
est juste un alias pour la directive ng-bind
, qui est supposément annulée par le terminal
.
Mise à jour: ancienne réponse (2014)
Il intercepte essentiellement l'événement ng-click
, affiche le message contenu dans la directive ng-confirm-click="message"
et demande à l'utilisateur de confirmer. Si la confirmation est cliquée, le ng-click
normal s'exécute, sinon le script se termine et ng-click
n'est pas exécuté.
<!-- index.html --> <button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?"> Publish </button>
// /app/directives/ng-confirm-click.js Directives.directive('ngConfirmClick', [ function(){ return { priority: -1, restrict: 'A', link: function(scope, element, attrs){ element.bind('click', function(e){ var message = attrs.ngConfirmClick; // confirm() requires jQuery if(message && !confirm(message)){ e.stopImmediatePropagation(); e.preventDefault(); } }); } } } ]);
Code de crédit à Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/
Mise à jour: Nouvelle réponse (2016)
1) Changement de préfixe de 'ng' à 'mw' car l'ancien ('ng') est réservé aux directives angulaires natives.
2) Directive modifiée pour transmettre une fonction et un message au lieu d'intercepter l'événement ng-click.
3) Ajouté par défaut "Êtes-vous sûr?" Message dans le cas où un message personnalisé n'est pas fourni à mw-confirm-click-message = "".
<!-- index.html --> <button mw-confirm-click="publish()" mw-confirm-click-message="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?"> Publish </button>
// /app/directives/mw-confirm-click.js "use strict"; var module = angular.module( "myApp" ); module.directive( "mwConfirmClick", [ function( ) { return { priority: -1, restrict: 'A', scope: { confirmFunction: "&mwConfirmClick" }, link: function( scope, element, attrs ){ element.bind( 'click', function( e ){ // message defaults to "Are you sure?" var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?"; // confirm() requires jQuery if( confirm( message ) ) { scope.confirmFunction(); } }); } } } ]);
Pour moi, http://www.w3schools.com/js/js_popup.asp , la boîte de dialogue de confirmation par défaut du navigateur a beaucoup travaillé. Juste essayé ceci:
$scope.delete = function() { if (confirm("sure to delete")) { // todo code for deletion } };
Simple … 🙂
Mais je pense que vous ne pouvez pas le personnaliser. Il apparaîtra avec le bouton "Annuler" ou "Ok".
MODIFIER:
Dans le cas où vous utilisez un cadre ionique, vous devez utiliser la boîte de dialogue ionicPopup comme dans:
// A confirm dialog $scope.showConfirm = function() { var confirmPopup = $ionicPopup.confirm({ title: 'Delete', template: 'Are you sure you want to delete this item?' }); confirmPopup.then(function(res) { if(res) { // Code to be executed on pressing ok or positive response // Something like remove item from list } else { // Code to be executed on pressing cancel or negative response } }); };
Pour plus de détails, reportez-vous à: $ ionicPopup
C'est tellement simple en utilisant core javascript + angular js:
$scope.delete = function(id) { if (confirm("Are you sure?")) { //do your process of delete using angular js. } }
Si vous cliquez sur OK, l'opération de suppression prendra, sinon, pas. * Id est le paramètre, enregistrement que vous souhaitez supprimer.
Vous ne souhaitez pas utiliser le terminal: false
puisque c'est ce qui bloque le traitement de l'intérieur du bouton. Au lieu de cela, dans votre link
effacez l' attr.ngClick
pour éviter le comportement par défaut.
http://plnkr.co/edit/EySy8wpeQ02UHGPBAIvg?p=preview
app.directive('ngConfirmClick', [ function() { return { priority: 1, link: function(scope, element, attr) { var msg = attr.ngConfirmClick || "Are you sure?"; var clickAction = attr.ngClick; attr.ngClick = ""; element.bind('click', function(event) { if (window.confirm(msg)) { scope.$eval(clickAction) } }); } }; } ]);
En ce jour, cette solution fonctionne pour moi:
/** * A generic confirmation for risky actions. * Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function */ angular.module('app').directive('ngReallyClick', [function() { return { restrict: 'A', link: function(scope, element, attrs) { element.bind('click', function() { var message = attrs.ngReallyMessage; if (message && confirm(message)) { scope.$apply(attrs.ngReallyClick); } }); } } }]);
Crédits: https://gist.github.com/asafge/7430497#file-ng-really-js
J'ai créé un module pour cette chose qui repose sur le service modal angular-UI $.
Une solution angulaire unique qui fonctionne avec ng-click
est possible en utilisant la compilation pour envelopper l'expression ng-click
.
Directif:
.directive('confirmClick', function ($window) { var i = 0; return { restrict: 'A', priority: 1, compile: function (tElem, tAttrs) { var fn = '$$confirmClick' + i++, _ngClick = tAttrs.ngClick; tAttrs.ngClick = fn + '($event)'; return function (scope, elem, attrs) { var confirmMsg = attrs.confirmClick || 'Are you sure?'; scope[fn] = function (event) { if($window.confirm(confirmMsg)) { scope.$eval(_ngClick, {$event: event}); } }; }; } }; });
HTML:
<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>
$scope.MyUpdateFunction = function () { var retVal = confirm("Do you want to save changes?"); if (retVal == true) { $http.put('url', myData). success(function (data, status, headers, config) { alert('Saved'); }).error(function (data, status, headers, config) { alert('Error while updating'); }); return true; } else { return false; } }
Code dit tout
Exemple de code HTML 5
<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to shout?">Click!</button>
AngularJs Custom directive code-échantillon
var app = angular.module('mobileApp', ['ngGrid']); app.directive('confirmationNeeded', function () { return { link: function (scope, element, attr) { var msg = attr.confirmationNeeded || "Are you sure?"; var clickAction = attr.ngClick; element.bind('click',function (e) { scope.$eval(clickAction) if window.confirm(msg) e.stopImmediatePropagation(); e.preventDefault(); }); } }; });
J'aimerais que AngularJS ait eu un dialogue de confirmation intégré. Souvent, il est plus agréable d'avoir un dialogue personnalisé que d'utiliser le navigateur intégré.
J'ai brièvement utilisé le bootstrap Twitter jusqu'à ce qu'il soit interrompu avec la version 6. J'ai cherché des solutions de rechange, mais celles que j'ai trouvées étaient compliquées. J'ai décidé d'essayer le JQuery UI.
Voici mon échantillon que j'appelle quand je suis sur le point d'enlever quelque chose de ng-grid;
// Define the Dialog and its properties. $("<div>Are you sure?</div>").dialog({ resizable: false, modal: true, title: "Modal", height: 150, width: 400, buttons: { "Yes": function () { $(this).dialog('close'); //proceed with delete... /*commented out but left in to show how I am using it in angular var index = $scope.myData.indexOf(row.entity); $http['delete']('/EPContacts.svc/json/' + $scope.myData[row.rowIndex].RecordID).success(function () { console.log("groovy baby"); }); $scope.gridOptions.selectItem(index, false); $scope.myData.splice(index, 1); */ }, "No": function () { $(this).dialog('close'); return; } } });
J'espère que ça aidera quelqu'un. J'étais en train de tirer mes cheveux quand j'avais besoin de mettre à niveau ui-bootstrap-tpls.js mais il a cassé ma boîte de dialogue existante. Je suis entré au travail ce matin, j'ai essayé quelques choses et j'ai compris que j'étais trop compliqué.
Si vous utilisez ui-router, le bouton d'annulation ou d'acceptation remplace l'url. Pour éviter cela, vous pouvez renvoyer faussement dans chaque cas de la phrase conditionnelle comme ceci:
app.directive('confirmationNeeded', function () { return { link: function (scope, element, attr) { var msg = attr.confirmationNeeded || "Are you sure?"; var clickAction = attr.confirmedClick; element.bind('click',function (event) { if ( window.confirm(msg) ) scope.$eval(clickAction); return false; }); } }; });
Vous pouvez utiliser l'ID avec un message ou sans. Sans message, le message par défaut s'affiche.
Directif
app.directive('ngConfirmMessage', [function () { return { restrict: 'A', link: function (scope, element, attrs) { element.on('click', function (e) { var message = attrs.ngConfirmMessage || "Are you sure ?"; if (!confirm(message)) { e.stopImmediatePropagation(); } }); } } }]);
Manette
$scope.sayHello = function(){ alert("hello") }
HTML
Avec un message
<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>
Sans messsage
<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>
Voici une solution simple et simple utilisant des promesses angulaires $q
, $window
et native .confirm()
modal:
angular.module('myApp',[]) .controller('classicController', ( $q, $window ) => { this.deleteStuff = ( id ) => { $q.when($window.confirm('Are you sure ?')) .then(( confirm ) => { if ( confirm ) { // delete stuff } }); }; });
Ici, j'utilise les fonctions de la syntaxe et de la flèche ES6 du controllerAs
mais elle fonctionne également dans ES5 simple.
Très simple .. J'ai une solution pour cela avec l'utilisation de la fenêtre de conformation bootstrap. Ici, je suis fourni
<button ng-click="deletepopup($index)">Delete</button>
Dans le popup du modèle bootstrap:
<div class="modal-footer"> <a href="" data-dismiss="modal" ng-click="deleteData()">Yes</a> <a href="" data-dismiss="modal">No</a> </div>
Js
var index=0; $scope.deleteData=function(){ $scope.model.contacts.splice(index,1); } // delete a row $scope.deletepopup = function ($index) { index=$index; $('#myModal').modal('show'); };
Lorsque je clique sur le bouton de suppression, la fenêtre contextuelle de suppression de bootstrap s'ouvrira et quand je cliquenerai, la ligne du bouton oui sera supprimée.
La boîte de dialogue de confirmation peut être mise en œuvre en utilisant le matériel AngularJS :
$ MdDialog ouvre une boîte de dialogue sur l'application pour informer les utilisateurs des informations critiques ou les obliger à prendre des décisions. Il existe deux approches pour la configuration: une API de promesse simple et une syntaxe d'objet ordinaire.
Exemple d'implémentation: Matériel angulaire – Dialogues