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

Question

J'essaye de configurer une boîte de dialogue de confirmation sur un ng-cliquez sur l'aide personnalisée angular js directive:

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 à l'intérieur de la balise à l'aide de mon 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ée dans ce cas). Il semble être due à la borne paramètre de mon directive. Avez-vous une idée de solution?

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

Answer 1

Si vous n'avez pas l'esprit de ne pas utiliser ng-click, cela fonctionne bien. Vous pouvez simplement le renommer en quelque chose d'autre et de toujours lire l'attribut, tout en évitant le gestionnaire de clic déclenchée deux fois problème, il existe à l'heure actuelle.

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

Je pense que le problème est - terminal charge d'autres directives de ne pas courir. De liaison de données avec {{ }} n'est qu'un alias pour l' ng-bind directive, qui est sans doute annulé par l' terminal.

Answer 2

Un nettoyage de la directive approche qui met en application AngularJS conventionnelles de ng-click.

Essentiellement, il intercepte le ng-cliquez sur l'événement, affiche le message contenu dans le ng-confirmer-cliquez sur="message" de la directive, et invite l'utilisateur à confirmer. Si cliqué sur confirmer, c'est normal ng-cliquez sur l'exécute, sinon le script ne se termine et ng-click 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.js
Directives.directive('ngConfirmClick', [
  function(){
    return {
      priority: -1,
      restrict: 'A',
      link: function(scope, element, attrs){
        element.bind('click', function(e){
          var message = attrs.ngConfirmClick;
          if(message && !confirm(message)){
            e.stopImmediatePropagation();
            e.preventDefault();
          }
        });
      }
    }
  }
]);

Code de crédit à Zach de la Neige: http://zachsnow.com/#!/blog/2013/confirmation-ng-click/

Answer 3

Pour moi http://www.w3schools.com/js/js_popup.asp le défaut de confirmation de la boîte de dialogue du navigateur a beaucoup travaillé. juste essayé ceci:

$scope.delete                    = function() {
        if ("confirm(sure to delete") == true) {
            //todo code for deletion
        }
    };

Simple.. :)
Mais je pense que vous ne pouvez pas personnaliser. Il apparaîtra avec "Annuler" ou "Ok".

Answer 4

Vous ne voulez pas utiliser terminal: false puisque c'est ce qui est le blocage de la transformation de l'intérieur du bouton. Au lieu de cela, dans votre link effacer l' attr.ngClick afin de prévenir 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)
          }
        });
      }
    };
  }
]);

Answer 5

En 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