Crie um simples Bootstrap Sim / Não confirmação ou apenas alerta de notificação no AngularJS

É tão simples em um ambiente não angular. Apenas html e uma linha de código js para mostrar um diálogo de confirmação modal na canvas.

Agora estou desenvolvendo um projeto AngularJS no qual estou usando diálogos de confirmação modal de ui-bootstrap em todo o lugar e estou cansado de criar novos controladores mesmo para coisas simples como “Você tem certeza de excluir este registro?” tipo de coisa.

Como você lida com essas situações simples? Tenho certeza de que algumas pessoas escreveram algumas diretrizes para simplificar as necessidades.

Estou lhe pedindo para compartilhar suas experiências ou os projetos que você conhece sobre esse assunto.

então crie um serviço reutilizável para isso … leia aqui

código aqui:

angular.module('yourModuleName').service('modalService', ['$modal', // NB: For Angular-bootstrap 0.14.0 or later, use $uibModal above instead of $modal function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, modalFade: true, templateUrl: '/app/partials/modal.html' }; var modalOptions = { closeButtonText: 'Close', actionButtonText: 'OK', headerText: 'Proceed?', bodyText: 'Perform this action?' }; this.showModal = function (customModalDefaults, customModalOptions) { if (!customModalDefaults) customModalDefaults = {}; customModalDefaults.backdrop = 'static'; return this.show(customModalDefaults, customModalOptions); }; this.show = function (customModalDefaults, customModalOptions) { //Create temp objects to work with since we're in a singleton service var tempModalDefaults = {}; var tempModalOptions = {}; //Map angular-ui modal custom defaults to modal defaults defined in service angular.extend(tempModalDefaults, modalDefaults, customModalDefaults); //Map modal.html $scope custom properties to defaults defined in service angular.extend(tempModalOptions, modalOptions, customModalOptions); if (!tempModalDefaults.controller) { tempModalDefaults.controller = function ($scope, $modalInstance) { $scope.modalOptions = tempModalOptions; $scope.modalOptions.ok = function (result) { $modalInstance.close(result); }; $scope.modalOptions.close = function (result) { $modalInstance.dismiss('cancel'); }; }; } return $modal.open(tempModalDefaults).result; }; }]); 

html para exibição

    

uma vez feito isso … você só tem que injetar acima do serviço onde quer que você queira criar uma checkbox de diálogo, exemplo abaixo

  $scope.deleteCustomer = function () { var custName = $scope.customer.firstName + ' ' + $scope.customer.lastName; var modalOptions = { closeButtonText: 'Cancel', actionButtonText: 'Delete Customer', headerText: 'Delete ' + custName + '?', bodyText: 'Are you sure you want to delete this customer?' }; modalService.showModal({}, modalOptions) .then(function (result) { //your-custom-logic }); } 

Você pode ver meu exemplo. tudo o que eu fiz.

  

roteiro

  var app = angular.module("myApp", []); app.controller('firstCtrl', ['$scope','$window', function($scope,$window) { $scope.delete = function(id) { deleteUser = $window.confirm('Are you sure you want to delete the Ad?'); if(deleteUser){ //Your action will goes here alert('Yes i want to delete'); } }; }]) 

Você pode usar a biblioteca Angular Confirm .

Quando incluído, tornou-se disponível como uma diretiva:

  

Bem como um serviço:

 angular.module('MyApp') .controller('MyController', function($scope, $confirm) { $scope.delete = function() { $confirm({text: 'Are you sure you want to delete?', title: 'Delete it', ok: 'Yes', cancel: 'No'}) .then(function() { // send delete request... }); }; }); 

Para qualquer coisa que tenha código que é acionado com um ng-click eu apenas adiciono um atributo de confirmação

por exemplo

  

e confirmar vem (não meu, encontrado na web)

 app.controller('ConfirmModalController', function($scope, $modalInstance, data) { $scope.data = angular.copy(data); $scope.ok = function() { $modalInstance.close(); }; $scope.cancel = function() { $modalInstance.dismiss('cancel'); }; }).value('$confirmModalDefaults', { template: '', controller: 'ConfirmModalController' }).factory('$confirm', function($modal, $confirmModalDefaults) { return function(data, settings) { settings = angular.extend($confirmModalDefaults, (settings || {})); data = data || {}; if ('templateUrl' in settings && 'template' in settings) { delete settings.template; } settings.resolve = { data: function() { return data; } }; return $modal.open(settings).result; }; }) .directive('confirm', function($confirm) { return { priority: 1, restrict: 'A', scope: { confirmIf: "=", ngClick: '&', confirm: '@' }, link: function(scope, element, attrs) { function reBind(func) { element.unbind("click").bind("click", function() { func(); }); } function bindConfirm() { $confirm({ text: scope.confirm }).then(scope.ngClick); } if ('confirmIf' in attrs) { scope.$watch('confirmIf', function(newVal) { if (newVal) { reBind(bindConfirm); } else { reBind(function() { scope.$apply(scope.ngClick); }); } }); } else { reBind(bindConfirm); } } } }) 

Meu google FOO falhou comigo e não consigo encontrar o site de origem para isso. Vou atualizar se eu encontrar.

Você pode criar uma fábrica simples como esta

 angular.module('app') .factory('modalService', [ '$modal', function ($modal) { var self = this; var modalInstance = null; self.open = function (scope, path) { modalInstance = $modal.open({ templateUrl: path, scope: scope }); }; self.close = function () { modalInstance.dismiss('close'); }; return self; } ]); 

No seu controlador

 angular.module('app').controller('yourController', ['$scope','modalService',function($scope,modalService){ $scope.openModal=function(){ modalService.open($scope,'modal template path goes here'); }; $scope.closeModal=function(){ modalService.close(); //do something on modal close }; }]); 

Eu passei $scope na function de serviço para que você possa acessar a function closeModal e no caso de você querer acessar alguns dados do seu controlador. No seu html