2016-02-19 18 views
8

Wie kann ich das Dialogfeld "Bestätigen" in der Schaltfläche unter "angularjs" anwenden?Dialogfeld "Bestätigen" in "angularjs"

<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button> 

Genau so.

<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span> 

aktualisieren

Zur Zeit mache ich es wie diese

function removeUser(index) { 
     var isConfirmed = confirm("Are you sure to delete this record ?"); 
     if(isConfirmed){ 
     vm.users.splice(index, 1); 
     }else{ 
     return false; 
     } 
    }; 

Antwort

13

ist der Schnipsel,

, wie Sie Ihren HTML sein sollte,

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button> 

Bitte Fügen Sie diese Anweisung in der benutzerdefinierten AngularJS Datei,

app.directive('ngConfirmClick', [ 
    function(){ 
     return { 
      link: function (scope, element, attr) { 
       var msg = attr.ngConfirmClick || "Are you sure?"; 
       var clickAction = attr.confirmedClick; 
       element.bind('click',function (event) { 
        if (window.confirm(msg)) { 
         scope.$eval(clickAction) 
        } 
       }); 
      } 
     }; 
}]) 

Ihren Winkel Umfang basierte auf Ihrer oben genannten Löschfunktion,

$scope.removeUser = function(index) { 
    vm.users.splice(index, 1); 
} 
+1

hat perfekt funktioniert! Vielen Dank. –

5
$scope.removeUser= function (ind){ 
if (confirm("Are you sure?")) { 
    alert("deleted"+ s); 
    $window.location.href = 'delete/'+ s; 
} 
} 

http://jsfiddle.net/ms403Ly8/61/

+0

Perfekte Antwort !! –

1

Ich würde die Nachricht Bit aus dem Löschvorgang Bit trennen, auf diese Weise Sie könnten das Bestätigungsbit in anderen wiederverwenden Teile Ihrer App: Ich benutze eine Richtlinie wie folgt:

angular.module('myModule').directive("ngConfirmClick", [ 
    function() { 
    return { 
    priority: -1, 
     restrict: "A", 
     link: function(scope, element, attrs) { 
     element.bind("click", function(e) { 
      var message; 
      message = attrs.ngConfirmClick; 
      if (message && !confirm(message)) { 
      e.stopImmediatePropagation(); 
      e.preventDefault(); 
      } 
     }); 
     } 
    }; 
    } 
]); 

dann Controller-Funktion mit der Löschaktion haben:

$scope.removeUser(index) { 
    //do stuff 
} 

und in der Ansicht würde ich ng Sie auf:

<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span> 

hoffe es hilft.

0

Sie können versuchen, dies zu tun: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview Sie können eine Direktive für den Dialog erstellen. Hier

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $window) { 

    $scope.delete = function(id) { 
    $window.location.href = 'delete/'+ id; 
    } 
}); 

app.directive('ngConfirmClick', [ 
    function(){ 
     return { 
      link: function (scope, element, attr) { 
       var msg = attr.ngConfirmClick || "Are you sure?"; 
       var clickAction = attr.confirmedClick; 
       element.bind('click',function (event) { 
        if (window.confirm(msg)) { 
         scope.$eval(clickAction) 
        } 
       }); 
      } 
     }; 
}]) 
Verwandte Themen