Creare un semplice Bootstrap Sì/Nessuna conferma o solo un avviso di notifica in Angular

Question

È così semplice in un ambiente non angolare. Solo html e due righe di codice js per mostrare una finestra di dialogo di conferma modale sullo schermo.

Ora sto sviluppando un progetto AngularJS in cui sto usando i dialoghi di conferma modali dell'interfaccia utente-bootstrap dappertutto e sono stufo di creare nuovi controller anche per cose semplici come "Sei sicuro di cancellare questo record?" tipo di roba.

Come gestite queste semplici situazioni? Sono sicuro che alcune persone hanno scritto alcune direttive per semplificare i bisogni.

Ti chiedo di condividere le tue esperienze o i progetti che conosci su quell'argomento.

Answer 1

così creare un servizio riutilizzabile per questo ... read here codice

qui:

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 per la visualizzazione

<div class="modal-header"> 
    <h3>{{modalOptions.headerText}}</h3> 
</div> 
<div class="modal-body"> 
    <p>{{modalOptions.bodyText}}</p> 
</div> 
<div class="modal-footer"> 
    <button type="button" class="btn" 
      data-ng-click="modalOptions.close()">{{modalOptions.closeButtonText}}</button> 
    <button class="btn btn-primary" 
      data-ng-click="modalOptions.ok();">{{modalOptions.actionButtonText}}</button> 
</div> 

una volta fatto questo ... non resta che inserire il servizio sopra il punto in cui si desidera creare una finestra di dialogo, esempio sotto

Answer 2

Puoi vedere il mio esempio. qualunque cosa abbia fatto.

<div ng-app="myApp" ng-controller="firstCtrl"> 
    <button ng-click="delete(1);">Delete </button> 
    </div> 

sceneggiatura

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

Answer 3

è possibile creare una semplice fabbrica di come questo

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

Nel vostro controller

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

Ho passato $scope in funzione di servizio in modo da può a ccess funzione closeModal e nel caso in cui si desideri accedere ad alcuni dati dal controller. nel codice HTML

<button ng-click="openModal()">Open Modal</button> 

Answer 4

per tutto ciò che ha il codice che viene attivato con un ng-click Ho solo aggiungere un attributo conferma

esempio

<a confirm="Are you sure?" ng-click="..."></a> 

e conferma viene dal (non mia, trovato sul 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: '<div class="modal-header"><h3 class="modal-title">Confirm</h3></div><div class="modal-body">{{data.text}}</div><div class="modal-footer"><button class="btn btn-primary" ng-click="ok()">OK</button><button class="btn btn-warning" ng-click="cancel()">Cancel</button></div>', 
     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); 
       } 
      } 
     } 
    }) 

Il mio Google FOO mi ha mancato e non riesco a trovare il sito di origine per questo. Aggiornerò se lo trovo.

Answer 5

È possibile utilizzare la libreria Angular Confirm.

Quando incluso, è diventato disponibile come una direttiva:

<button type="button" ng-click="delete()" confirm="Are you sure?">Delete</button> 

Così come un servizio:

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