Buat konfirmasi Bootstrap Yes/No sederhana atau hanya peringatan notifikasi di AngularJS

Ini sangat sederhana di lingkungan non-Angular. Hanya html dan dua baris kode js untuk menampilkan dialog konfirmasi modal di layar.

Sekarang saya sedang mengembangkan proyek AngularJS di mana saya menggunakan dialog konfirmasi modal ui-bootstrap di semua tempat dan saya muak membuat pengontrol baru bahkan untuk hal-hal sederhana seperti "Apakah Anda yakin untuk menghapus catatan ini? " semacam itu.

Bagaimana Anda menangani situasi sederhana ini? Saya yakin beberapa orang menulis beberapa arahan untuk menyederhanakan kebutuhan.

Saya meminta Anda untuk berbagi pengalaman atau proyek yang Anda ketahui tentang subjek itu.

Larutan

jadi buatlah layanan yang dapat digunakan kembali untuk itu... baca di sini

kode di sini:

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

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
  {{modalOptions.closeButtonText}}
  {{modalOptions.actionButtonText}}
</div>

setelah ini selesai... Anda hanya perlu menginjeksikan layanan di atas di mana pun Anda ingin membuat kotak dialog, contoh di bawah ini

 $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
        });
}
Komentar (10)

Anda dapat melihat contoh saya. apa pun yang saya lakukan.

  <div ng-app="myApp" ng-controller="firstCtrl">
    Delete 
  </div>

skrip

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

Anda bisa membuat pabrik sederhana seperti ini

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

Di pengendali Anda

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

Saya telah melewatkan $scope dalam fungsi layanan sehingga Anda dapat mengakses fungsi closeModal dan jika Anda ingin mengakses beberapa data dari controller Anda. Di html Anda

Open Modal
Komentar (2)