de-vraag
  • Pertanyaan
  • Tag
  • Pengguna
Notifikasi
Imbalan
Registrasi
Setelah Anda mendaftar, Anda akan diberitahu tentang balasan dan komentar untuk pertanyaan Anda.
Gabung
Jika Anda sudah memiliki akun, masuk untuk memeriksa pemberitahuan baru.
Akan ada hadiah untuk pertanyaan, jawaban, dan komentar tambahan.
Lebih
Sumber
Sunting
 ilter
ilter
Question

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.

33 2015-04-13T09:41:22+00:00 3
 georgeawg
georgeawg
Pertanyaan edit 13 Juli 2018 в 9:56
Pemrograman
angularjs
angular-ui-bootstrap
bootstrap-modal
Pertanyaan ini memiliki :value jawaban dalam bahasa Inggris, untuk membacanya masuk ke akun Anda.
Solution / Answer
 harishr
harishr
13 April 2015 в 9:56
2015-04-13T09:56:06+00:00
Lebih
Sumber
Sunting
#27275239

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

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
        });
}
 umair151
umair151
Jawaban edit 10 Januari 2017 в 8:35
60
0
Masum Billah
Masum Billah
13 April 2015 в 10:00
2015-04-13T10:00:06+00:00
Lebih
Sumber
Sunting
#27275240

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

  <div ng-app="myApp" ng-controller="firstCtrl">
    <button ng-click="delete(1);">Delete </button>
  </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');
    }
  };
 }])
17
0
Himanshu Mittal
Himanshu Mittal
13 April 2015 в 10:43
2015-04-13T10:43:09+00:00
Lebih
Sumber
Sunting
#27275241

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

<button ng-click="openModal()">Open Modal</button>
2
0
Related communities 1
Angular Indonesia
Angular Indonesia
3 519 pengguna
Framework web development aplikasi web dan mobile https://angular.io/ Facebook Group https://www.facebook.com/groups/462764390497214/ Github Repo Angular ID https://github.com/angular-indonesia Medium Angular Indonesia https://medium.com/angularid
Buka telegram
Tambahkan pertanyaan
Kategori
Semua
Teknologi
Budaya / Rekreasi
Kehidupan / Seni
Ilmu Pengetahuan
Profesional
Bisnis
Pengguna
Semua
Baru
Populer
1
Asilbek Qadamboyev
Terdaftar 2 hari yang lalu
2
Akshit Mehta
Terdaftar 4 hari yang lalu
3
me you
Terdaftar 1 minggu yang lalu
4
Никита иванов
Terdaftar 1 minggu yang lalu
5
Alex1976G_06
Terdaftar 1 minggu yang lalu
ID
JA
KO
RU
© de-vraag 2022
Sumber
stackoverflow.com
di bawah lisensi cc by-sa 3.0 dengan atribusi