Sử dụng Bootstrap Modal trong Angular JS

I. Lời mở đầu

Sau đây tôi sẽ giới thiệu cho các bạn Angular Modal Service, một service cực kỳ tuyệt vời dùng để tạo hoặc custom modal bootstrap theo ý muốn của mình trong Angular JS.

II. Cách thực hiện

Step 1: Install with Bower

• Install service bằng bower:

  bower install angular-modal-service --save

• Nếu bạn không sử dụng bower thì bạn có thể download nó trực tiếp từ thư mục dst của repo.

Step 2: Include the JavaScript

• Chúc ta sẽ thêm file JavaScript vào ứng dụng từ dst folder dst

    <script src="bower_components/angular-modal-service/dst/angular-modal-service.min.js"></script>

Step 3: Add is as dependency

• Các bạn phải đảm bảo rằng module angularModalService được thêm vào mục các list module support cho myApp

    var app = angular.module('myApp', ['angularModalService']);

Step 4: Show the Modal

• Bước ở trên chúng ta đã include ModalService vào tất cả các controller, directive hoặc là service. Giờ chúng ta sẽ cọi hàm showModal để show ra modal:

        app.controller('SampleController', function($scope, ModalService) {

          ModalService.showModal({
            templateUrl: "template.html",
            controller: "ModalController"
          }).then(function(modal) {

            //it's a bootstrap element, use 'modal' to show it
            modal.element.modal();
            modal.close.then(function(result) {
              console.log(result);
            });
          });

        );

• Đoạn code trên có nghĩa là
  • Load HTML từ file template.html, rồi add nó vào DOM
  • Tạo môt scope cho nó
  • Tạo một instance của ModalController

Step 5: Close the Modal

• Ở bước trên có 1 dòng controller: "ModalController", vậy ta cần một controller với tên như thế, và trong controller đó ta sẽ khai báo một function dùng để close modal

        app.controller('ModalController', function($scope, close) {

          // when you need to close the modal, call close
          close("Success!");
        });

• Ở function close() chúng ta có thể thêm 1 tham số là milliseconds, ý nghĩa là modal sẽ tắt sau bao nhiêu milliseconds.

        close(result, 500); // close, but give 500ms for bootstrap to animate

III. Quick Example

Link Demo