web-dev-qa-db-fra.com

Créez une simple alerte Bootstrap Oui / Non ou juste une notification dans AngularJS

C'est si simple dans un environnement non angulaire. Juste HTML et deux lignes de code js pour afficher une boîte de dialogue de confirmation modale à l'écran.

Maintenant, je développe un projet AngularJS dans lequel j'utilise des dialogues de confirmation modale ui-bootstrap un peu partout et j'en ai assez de créer de nouveaux contrôleurs, même pour des choses simples comme "Êtes-vous sûr de vouloir supprimer cet enregistrement?" genre de choses.

Comment gérez-vous ces situations simples? Je suis sûr que certaines personnes ont écrit des directives pour simplifier les besoins.

Je vous demande de partager vos expériences ou les projets que vous connaissez sur ce sujet.

angularjsangular-ui-bootstrapbootstrap-modal
33
ilter

alors créez un service réutilisable pour cela ... lisez ici

code ici:

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 pour l'affichage

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

une fois que cela est fait ... il vous suffit d’injecter le service ci-dessus là où vous voulez créer une boîte de dialogue, exemple ci-dessous

 $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
        });
}
60
harishr

Vous pouvez voir mon exemple. tout ce que j'ai fait.

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

scénario

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

Vous pouvez utiliser la bibliothèque Angular Confirm .

Une fois inclus, il est devenu disponible en tant que directive:

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

En plus d'un service:

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

Pour tout ce qui a du code qui est déclenché avec un clic-ng, je viens d'ajouter un attribut de confirmation

par exemple

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

et confirme vient de (pas le mien, trouvé sur le 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);
                }
            }
        }
    })

Mon google FOO m'a échoué et je ne trouve pas le site source pour cela. Je mettrai à jour si je le trouve.

6
Steve Drake

Vous pouvez créer une usine simple comme celle-ci

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

Dans votre contrôleur

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

J'ai réussi $scope _ service afin que vous puissiez accéder à la fonction closeModal et si vous souhaitez accéder à certaines données à partir de votre contrôleur. Dans votre html

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