Ich versuche, einen Bestätigungsdialog auf einem einzurichten ng-click Verwenden einer benutzerdefinierten anglejs-Direktive:

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

Das funktioniert großartig, aber leider werden Ausdrücke innerhalb des Tags mit meiner Direktive nicht ausgewertet:

<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>

(Name wird dabei nicht ausgewertet). Es scheint am Terminalparameter meiner Direktive zu liegen. Haben Sie eine Idee zur Problemumgehung?

Um meinen Code zu testen:
http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

Wenn es Ihnen nichts ausmacht, nicht zu verwenden ng-click, es funktioniert einwandfrei. Sie können es einfach in etwas anderes umbenennen und das Attribut trotzdem lesen, während Sie vermeiden, dass der Click-Handler zweimal ausgelöst wird, was derzeit ein Problem ist.

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

Ich denke, das Problem ist terminal weist andere Direktiven an, nicht ausgeführt zu werden. Datenbindung mit {{ }} ist nur ein Alias ​​für die ng-bind Richtlinie, die vermutlich durch aufgehoben wird terminal.

Ein sauberer richtungsweisender Ansatz.

Update: Alte Antwort (2014)

Es fängt im Grunde die ng-click Ereignis, zeigt die in der enthaltene Nachricht an ng-confirm-click="message" Anweisung und fordert den Benutzer zur Bestätigung auf. Wenn Bestätigen geklickt wird, normal ng-click ausgeführt, wenn nicht das Skript beendet und ng-click wird nicht ausgeführt.

<!-- 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();
          }
        });
      }
    }
  }
]);

Codegutschrift an Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Update: Neue Antwort (2016)

1) Präfix von ‘ng’ in ‘mw’ geändert, da das erstere (‘ng’) für native Winkeldirektiven reserviert ist.

2) Geänderte Direktive, um eine Funktion und Nachricht zu übergeben, anstatt das ng-click-Ereignis abzufangen.

3) Standard “Sind Sie sicher?” hinzugefügt. Nachricht für den Fall, dass mw-confirm-click-message=”” keine benutzerdefinierte Nachricht bereitgestellt wird.

<!-- 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();
          }
        });
      }
    }
  }
]);

Für mich, https://www.w3schools.com/js/js_popup.asp, das standardmäßige Bestätigungsdialogfeld des Browsers hat sehr gut funktioniert. hab das gerade ausprobiert:

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

Einfach.. 🙂
Aber ich denke, man kann es nicht anpassen. Es wird mit der Schaltfläche “Abbrechen” oder “Ok” angezeigt.

BEARBEITEN:

Falls Sie das ionische Framework verwenden, müssen Sie das ionicPopup-Dialogfeld wie folgt verwenden:

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

Weitere Informationen finden Sie unter: $ionicPopup

Es ist so einfach, Kern-Javascript + Winkel-js zu verwenden:

$scope.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular js.
           }
   }

Wenn Sie auf OK klicken, wird der Löschvorgang ausgeführt, andernfalls nicht. * id ist der Parameter, Datensatz, den Sie löschen möchten.

Sie möchten nicht verwenden terminal: false da dies die Verarbeitung innerhalb der Schaltfläche blockiert. Stattdessen in Ihrem link klar die attr.ngClick um das Standardverhalten zu verhindern.

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

    $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 sagt alles

Zum heutigen Datum funktioniert diese Lösung für mich:

/**
 * 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);
                }
            });
        }
    }
}]);

Kredite:https://gist.github.com/asafge/7430497#file-ng-really-js