web-dev-qa-db-fra.com

Boîte de dialogue de confirmation sur ng-click - AngularJS

J'essaie de configurer une boîte de dialogue de confirmation sur un ng-click à l'aide d'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 très bien, mais malheureusement, les expressions de la balise 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 ce cas). Cela semble être dû au paramètre terminal de ma directive. Avez-vous des idées de solution de contournement? 

Pour tester mon code: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

javascriptangularjsangularjs-directiveangularjs-scope
81
poiuytrez

Si cela ne vous dérange pas de ne pas utiliser ng-click, cela fonctionne correctement. Vous pouvez simplement le renommer et lire l’attribut, tout en évitant que le gestionnaire de clics ne soit déclenché deux fois.

http://plnkr.co/edit/YWr6o2?p=preview

Je pense que le problème est terminal indique aux autres directives de ne pas être exécutées. La liaison de données avec {{ }} est simplement un alias pour la directive ng-bind, qui est probablement annulée par terminal. 

89
mikel

Une approche directive propre.

Mise à jour: Ancienne réponse (2014)

En gros, il intercepte l'événement ng-click, affiche le message contenu dans la directive ng-confirm-click="message" et demande à l'utilisateur de confirmer. Si vous cliquez sur confirmer, le ng-click normal s'exécute, sinon le script se termine et le 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 crédit à Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Mise à jour: Nouvelle réponse (2016)

1) Le préfixe "ng" remplacé par "mw" étant donné que 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) 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();
          }
        });
      }
    }
  }
]);
56
mikeborgh

Pour moi, https://www.w3schools.com/js/js_popup.asp , la boîte de dialogue de confirmation par défaut du navigateur fonctionnait beaucoup. vient d'essayer 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 "Annuler" ou "Ok".

MODIFIER:

Si vous utilisez un framework ionique, vous devez utiliser la boîte de dialogue ionicPopup comme suit:

// 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, voir: $ ionicPopup

45
Kailas

Son si simple en utilisant le noyau 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, enregistrer que vous souhaitez supprimer.

9
VBMali

Vous ne voulez pas utiliser terminal: false car c'est ce qui bloque le traitement de l'intérieur du bouton. Dans votre link, effacez plutôt le 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)
          }
        });
      }
    };
  }
]);
5
Stepan Riha

À la date d'aujourd'hui, 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

4
Nanu

Une solution uniquement angulaire qui fonctionne à côté de ng-click est possible en utilisant la compilation pour envelopper l'expression ng-click.

Directive: 

.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>
4
scarlz

J'ai créé un module pour cette chose même qui repose sur le service modal Angular-UI $.

https://github.com/Schlogen/angular-confirm

4
James Kleeh
    $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;
        }
    }

Le code dit tout

3
om471987

Exemple de code HTML 5

<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Click!</button>

Exemple de code de directive personnalisée AngularJs

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();
       });
     }
    };
});
1
Anil Singh

Le dialogue de confirmation peut être implémenté avec AngularJS Material :

$ mdDialog ouvre une boîte de dialogue sur l'application pour informer les utilisateurs sur les critiques informations ou les obliger à prendre des décisions. Il y en a deux approches pour la configuration: une API de promesse simple et une syntaxe d'objet standard.

Exemple de mise en œuvre: Matériau angulaire - Dialogues

1
Justas

Si vous utilisez ui-router, le bouton annuler ou accepter remplace l’url. Pour éviter cela, vous pouvez retourner false dans chaque cas de la peine avec sursis 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;
    });
  }
}; });
0
Juanma Jurado

Une solution angulaire très simple

Vous pouvez utiliser id avec un message ou sans. Sans message, le message par défaut sera affiché.

Directive 

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 message

<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>
0
Merlin

Voici une solution simple et claire utilisant les promesses angulaires $q, $window et .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 la syntaxe controllerAs et les fonctions de flèche ES6, mais cela fonctionne également en clair.

0
Freezystem

Supprimer la confirmation en utilisant bootstrap dans angularjs

très simple .. J'ai une solution pour cela avec l'utilisation de bootstrap conformation popup . Ici, je suis fourni 

<button ng-click="deletepopup($index)">Delete</button>

dans le modèle de bootstrap popup:

<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');
};

quand je clique sur le bouton supprimer bootstrap supprimer conformation popup va s'ouvrir et quand je clique sur oui bouton rangée sera supprimé. 

0
Rama Krishna