Bestätigungsdialog bei ng-click - AngularJS

Ein sauberer Richtlinienansatz.

Update: Alte Antwort (2014)

Es fängt im Wesentlichen das ng-click-Ereignis ab, zeigt die in der ng-confirm-click="message"-Direktive enthaltene Nachricht an und fordert den Benutzer zur Bestätigung auf. Wenn Sie auf "Bestätigen" klicken, wird der normale ng-click ausgeführt, andernfalls wird 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();
          }
        });
      }
    }
  }
]);

Code Credit für Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Update: Neue Antwort (2016)

1) Geändertes Präfix von 'ng' in 'mw', da das vorherige ('ng') für native Winkelanweisungen reserviert ist.

2) Die Anweisung wurde geändert, um eine Funktion und eine Nachricht zu übergeben, anstatt das ng-click-Ereignis abzufangen.

3) Standard hinzugefügt "Sind Sie sicher?" Nachricht, falls keine benutzerdefinierte Nachricht an mw-confirm-click-message = "" gesendet 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 , hat das Standard-Bestätigungsdialogfeld des Browsers sehr viel funktioniert. habe gerade das ausprobiert:

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

Einfach .. :)
Aber ich denke, Sie können es nicht anpassen. Es erscheint mit der Schaltfläche "Abbrechen" oder "Ok".

EDIT:

Falls Sie ein ionisches 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, Core Javascript + winkelige 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 ist nicht . * Id der Parameter, den Sie löschen möchten.

Sie möchten terminal: false nicht verwenden, da dies die Verarbeitung innerhalb der Schaltfläche blockiert. Löschen Sie stattdessen in Ihrer link den 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)
          }
        });
      }
    };
  }
]);

In der heutigen Zeit 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);
                }
            });
        }
    }
}]);

Credits: https://Gist.github.com/asafge/7430497#file-ng-really-js

Eine Nur-Winkel-Lösung, die neben ng-click funktioniert, ist möglich, wenn Sie den ng-click-Ausdruck mit compile umschließen.

Richtlinie:

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

Ich habe ein Modul für dieses Ding erstellt, das auf dem Modular-Service Angular-UI $ basiert.

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

    $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

HTML 5 Codebeispiel

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

Code-Probe der Zollrichtlinie von 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();
       });
     }
    };
});

Bestätigungsdialog kann mit AngularJS Material implementiert werden:

$ mdDialog öffnet einen Dialog über der App, um Benutzer über kritische .__ zu informieren. Informationen oder verlangen, dass sie Entscheidungen treffen. Es gibt zwei Ansätze für das Setup: eine einfache Versprechen-API und reguläre Objektsyntax.

Implementierungsbeispiel: Winkelmaterial - Dialoge

Wenn Sie einen UI-Router verwenden, ersetzen Sie die URL durch die Schaltfläche "Abbrechen" oder "Akzeptieren". Um dies zu verhindern, können Sie in jedem Fall des bedingten Satzes false wie folgt zurückgeben:

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

Eine sehr einfache eckige Lösung

Sie können die ID mit einer Nachricht oder ohne verwenden. Ohne Nachricht wird die Standardnachricht angezeigt.

Richtlinie

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

Controller

$scope.sayHello = function(){
    alert("hello")
}

HTML

Mit einer Nachricht

<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>

Ohne eine Nachricht

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

Hier ist eine saubere und einfache Lösung mit Winkelversprechen $q, $window und nativem .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
          }
        });
    };
  });

Hier verwende ich controllerAs-Syntax und ES6-Pfeilfunktionen, aber es funktioniert auch in normalem ES5.

Bestätigungs-Popup mit bootstrap in anglejs löschen

sehr einfach .. Ich habe eine Lösung dafür mit Bootstrap Conformation Popup ..__ Hier werde ich bereitgestellt 

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

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

wenn ich auf die Schaltfläche "Löschen" klicke, öffnet sich der Bootstrap-Befehl "Delete".