Caixa de diálogo de confirmação no ng-click – AngularJS

Eu estou tentando configurar uma checkbox de diálogo de confirmação em um ng-click usando uma diretiva angularjs personalizada:

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

Isso funciona muito bem, mas infelizmente as expressões dentro da tag usando minha diretiva não são avaliadas:

  

(nome não é avaliado neste caso). Parece ser devido ao parâmetro terminal da minha diretiva. Você tem alguma idéia de solução alternativa?

Para testar meu código: http://plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

Se você não se importa em não usar o ng-click , tudo funciona bem. Você pode apenas renomeá-lo para outra coisa e ainda ler o atributo, evitando que o manipulador de cliques seja acionado duas vezes, problema que existe no momento.

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

Eu acho que o problema é terminal instrui outras diretivas para não executar. A vinculação de dados com {{ }} é apenas um alias para a diretiva ng-bind , que é presumivelmente cancelada pelo terminal .

Uma abordagem diretiva limpa.

Atualização: Resposta antiga (2014)

Basicamente, ele intercepta o evento ng-click , exibe a mensagem contida na diretiva ng-confirm-click="message" e solicita que o usuário confirme. Se a confirmação for clicada, o ng-click normal é executado, se não o script terminar e o ng-click não for executado.

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

Código de crédito para Zach Snow: http://zachsnow.com/#!/blog/2013/confirming-ng-click/

Atualização: Nova Resposta (2016)

1) Prefixo alterado de ‘ng’ para ‘mw’, já que o primeiro (‘ng’) é reservado para diretivas angulares nativas.

2) Diretiva modificada para passar uma function e mensagem em vez de interceptar o evento ng-click.

3) Adicionado padrão “Tem certeza?” mensagem no caso de uma mensagem personalizada não ser fornecida para mw-confirm-click-message = “”.

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

Para mim, https://www.w3schools.com/js/js_popup.asp , a checkbox de diálogo de confirmação padrão do navegador funcionou muito. apenas tentei isso:

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

Simples .. 🙂
Mas eu acho que você não pode personalizá-lo. Ele aparecerá com o botão “Cancelar” ou “Ok”.

EDITAR:

Caso você esteja usando o framework iônico, você precisa usar o diálogo ionicPopup como em:

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

Para mais detalhes, consulte: $ ionicPopup

É tão simples usando o javascript do núcleo + js angular:

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

Se você clicar em OK, a operação de exclusão será executada; caso contrário, não. * id é o parâmetro, registro que você deseja excluir.

Você não quer usar o terminal: false porque é isso que está bloqueando o processamento dentro do botão. Em vez disso, no seu link limpe o attr.ngClick para evitar o comportamento padrão.

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

Na data de hoje, esta solução funciona para mim:

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

Créditos: https://gist.github.com/asafge/7430497#file-ng-really-js

Eu criei um módulo para isso mesmo que se baseia no serviço modal Angular-UI $.

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

Uma solução somente angular que funciona ao lado do ng-click é possível usando a compilation para envolver a expressão ng-click .

Directiva:

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

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

Código diz tudo

Amostra de código HTML 5

  

Amostra de código da diretiva personalizada 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(); }); } }; }); 

O diálogo de confirmação pode ser implementado usando o material AngularJS :

$ mdDialog abre um diálogo sobre o aplicativo para informar os usuários sobre informações críticas ou exigir que tomem decisões. Existem duas abordagens para a configuração: uma API prometora simples e uma syntax de object regular.

Exemplo de implementação: Material Angular – Diálogos

Se você usar o roteador ui, o botão cancelar ou aceitar replaceá o URL. Para evitar isso, você pode retornar false em cada caso da sentença condicional da seguinte forma:

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

Uma solução angular muito simples

Você pode usar o id com uma mensagem ou sem. Sem mensagem, a mensagem padrão será exibida.

Directiva

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

Controlador

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

HTML

Com uma mensagem

 Say Hello! 

Sem uma bagunça

 Say Hello! 

Aqui está uma solução limpa e simples usando promises angulares $q , $window e .confirm() nativo .confirm() :

 angular.module('myApp',[]) .controller('classicController', ( $q, $window ) => { this.deleteStuff = ( id ) => { $q.when($window.confirm('Are you sure ?')) .then(( confirm ) => { if ( confirm ) { // delete stuff } }); }; }); 

Aqui estou usando a syntax controllerAs e as funções de seta ES6, mas ela também está trabalhando em um simples ES5.

Excluir popup de confirmação usando o bootstrap em angularjs

muito simples .. Eu tenho uma solução para isso com o uso de popup de conformação bootstrap. Aqui eu sou fornecido

  

no pop-up do modelo de bootstrap:

  

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

Quando eu clicar em Excluir botão de boot excluir conformação pop-up será aberto e quando eu clicar em Sim linha do botão será excluído.

Eu gostaria que o AngularJS tivesse construído um diálogo de confirmação. Muitas vezes, é melhor ter um diálogo personalizado do que usar o navegador integrado.

Eu usei brevemente o bootstrap do twitter até ser descontinuado com a versão 6. Eu procurei por alternativas, mas as que eu encontrei foram complicadas. Eu decidi experimentar a interface do usuário da JQuery.

Aqui está o meu exemplo que eu ligo quando estou prestes a remover algo do ng-grid;

  // Define the Dialog and its properties. $("
Are you sure?
").dialog({ resizable: false, modal: true, title: "Modal", height: 150, width: 400, buttons: { "Yes": function () { $(this).dialog('close'); //proceed with delete... /*commented out but left in to show how I am using it in angular var index = $scope.myData.indexOf(row.entity); $http['delete']('/EPContacts.svc/json/' + $scope.myData[row.rowIndex].RecordID).success(function () { console.log("groovy baby"); }); $scope.gridOptions.selectItem(index, false); $scope.myData.splice(index, 1); */ }, "No": function () { $(this).dialog('close'); return; } } });

Espero que isso ajude alguém. Eu estava puxando o cabelo para fora quando eu precisava atualizar o ui-bootstrap-tpls.js, mas isso quebrou meu diálogo existente. Eu entrei no trabalho esta manhã, tentei algumas coisas e então percebi que estava complicando demais.