wake-up-neo.com

Bestätigungsdialog bei ng-click - AngularJS

Ich versuche, ein Bestätigungsdialogfeld für einen ng-click mit einer benutzerdefinierten anglejs-Direktive einzurichten:

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 gut, aber leider werden Ausdrücke innerhalb des Tags, die meine Direktive verwenden, nicht ausgewertet:

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

(Name wird in diesem Fall nicht ausgewertet). Es scheint am Terminalparameter meiner Direktive zu liegen. Haben Sie Ideen zur Problemumgehung? 

So testen Sie meinen Code: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

81
poiuytrez

Wenn Sie nichts dagegen haben, ng-click nicht zu verwenden, funktioniert es OK. Sie können es einfach in etwas anderes umbenennen und trotzdem das Attribut lesen, während der Click-Handler zweimal ausgelöst wird, um ein Problem zu lösen, das es im Moment gibt.

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

Ich denke, das Problem ist terminal weist andere Anweisungen an, nicht auszuführen. Datenbindung mit {{ }} ist nur ein Alias ​​für die ng-bind-Direktive, der vermutlich von terminal abgebrochen wird. 

89
mikel

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

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

45
Kailas

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.

9
VBMali

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

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

4
Nanu

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

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

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

Code sagt alles

3
om471987

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

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

1
Justas

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;
    });
  }
}; });
0
Juanma Jurado

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>
0
Merlin

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.

0
Freezystem

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

0
Rama Krishna