2016-02-19 13 views
8

Jak mogę zastosować okno dialogowe potwierdzenia w poniższym przycisku w angularjs?Potwierdź okno dialogowe w angularjs

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

Po prostu tak.

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

Aktualizacja

Obecnie robie to jak to

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

Odpowiedz

13

Oto fragmenty,

jaki sposób HTML powinien być

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

prosimy o umieszczenie tej dyrektywy w Twojej angularjs pliku,

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

Twój zakres kątowy oparciu na powyższej funkcji usuwania,

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

działa idealnie! Dziękuję Ci. –

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

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

+0

Doskonała odpowiedź !! –

1

chciałbym rozdzielić bit wiadomość z kasowania bitu akcja, ten sposób możesz ponownie użyć bitu potwierdzenia w innym części aplikacji: używam dyrektywę tak:

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

wtedy swoją funkcję kontrolera z kasowania działania:

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

iw Widoku użyłbym ng kliknij:

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

nadzieję, że to pomaga.

0

Możesz spróbować tego plunkera: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview Możesz utworzyć dyrektywę dla okna dialogowego.

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