Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Bootstrap modal trong AngularJS một cách hiệu quả, tái sử dụng dễ dàng.

Đầu tiên hãy xem qua Demo để biết chúng ta sẽ làm gì nhé.

 
https://sangnguyenplus.github.io/angular-modal/

Các thư viện sẽ sử dụng trong bài viết này.

  • Bootstrap CSS

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  • Jquery và AngularJS: Đương nhiên là 2 thư viện này phải đi cùng nhau rồi 😀
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.0.0.min.js"></script>

Đầu tiên hãy tạo cấu trúc ứng dụng như hình dưới.

bootstrap-modal-angularjs

 

Nội dung file index.html


<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
   <meta charset="UTF-8">
   <title>Modal - AngularJS</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 <div class="container">
    <div ng-controller="MainController">
       <div class="wrapper">
          <h2>Modal - AngularJS</h2>
          <button class="btn btn-primary" ng-click="showModal('confirm')">Confirm modal</button>
          <button class="btn btn-info" ng-click="showModal('alert')">Alert modal</button>
       </div>
    </div>
 </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="js/ui-bootstrap-tpls-2.0.0.min.js"></script>
<script src="js/modal.js"></script>
</body>
</html>

Nội dung tập tin này khá đơn giản và chắc không cần giải thích nhiều. Ở đây các bạn cần quan tâm tới MainController và showModal (hàm này được sử dụng để kích hoạt modal).

views/alert.html: Nội dung modal cảnh báo


<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" ng-click="close()" aria-hidden="true">×</button>
        <h4 class="modal-title custom_align" id="Heading">{{ data.title }}</h4>
    </div>
    <div class="modal-body">
        <div class="alert alert-success" ng-show="{{ data.type == 'success' }}">{{ data.message }}</div>
        <div class="alert alert-warning" ng-show="{{ data.type == 'warning' }}">{{ data.message }}</div>
        <div class="alert alert-danger" ng-show="{{ data.type == 'danger' }}">{{ data.message }}</div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary pull-right" ng-click="ok()">OK</button>
    <div class="clearfix"></div>
  </div>
</div>
<!-- /.modal-content -->

 

views/alert.html: Hiển thị modal xác nhận


<div class="modal-content">
    <div class="modal-header">
       <button type="button" class="close" ng-click="cancel()" aria-hidden="true">×</button>
       <h4 class="modal-title custom_align" id="Heading">{{ data.title }}</h4>
    </div>
    <div class="modal-body">
        <div class="alert alert-warning"><span class="fa fa-warning"></span> {{ data.message }}</div>
    </div>
    <div class="modal-footer ">
         <button type="button" class="btn btn-warning" ng-click="ok()">OK</button>
         <button type="button" class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</div>
<!-- /.modal-content -->

Tiếp theo là tập tin chính, xử lý hiển thị modal và các xử lý tương ứng với lựa chọn của người dùng.

js/modal.js


angular.module('app', ['ui.bootstrap'])

.controller('modal.alert', ['$scope', '$uibModalInstance', 'data', function($scope, $uibModalInstance, data) {
   $scope.data = data;

   $scope.ok = function() {
       $uibModalInstance.close();
   };

   $scope.close = function() {
      $uibModalInstance.dismiss('cancel');
   };
}])

.controller('modal.confirm', ['$scope', '$uibModalInstance', 'data', function($scope, $uibModalInstance, data) {
    $scope.data = data;

    $scope.ok = function() {
        $uibModalInstance.close();
    };

    $scope.cancel = function() {
        $uibModalInstance.dismiss('cancel');
    };
}])
.service('appAlert', ['$uibModal', '$http', function($uibModal, $http) {
    this.alert = function(data, callback) {
       /*begin modal*/
       var modalInstance = $uibModal.open({
         templateUrl: '/views/alert.html',
         controller: 'modal.alert',
         backdrop: 'static',
         resolve: {
           data: function() {
              return data;
           }
         }
       });
    };

    this.confirm = function(data, callback) {
        /*begin modal*/
        var modalInstance = $uibModal.open({
            templateUrl: '/views/confirm.html',
            controller: 'modal.confirm',
            backdrop: 'static',
            resolve: {
               data: function() {
                   return data;
               }
            }
        });

        modalInstance.result.then(function() {
              return callback(true);
        }, function() {
            return callback(false);
        });
        /*end modal*/
     };
}])

.controller('MainController', ['$scope', '$uibModal', 'appAlert', function($scope, $uibModal, appAlert) {
     $scope.showModal = function(type) {
     if (type == 'alert') {
           appAlert.alert({
           title: 'Title',
           message: 'This is alert message!',
           type: 'danger'
        });
     } else {
         appAlert.confirm({
             title: 'Confirm delete!',
             message: 'Do you want to delete this record ?'
         }, function(isOk) {
              if (isOk) {
                 appAlert.alert({
                     title: 'Success',
                     message: 'Delete record successfully!',
                     type: 'success'
                 });
              }
         });
      }
  };
}]);

Cuối cùng là thêm một chút css để hiển thị rõ ràng hơn.
css/style.css

 
.wrapper { 
   width: 500px; 
   margin: 40px auto; 
   text-align: center; 
   background: #f1f1f1; 
   -webkit-border-radius: 4px; 
   -moz-border-radius: 4px; 
   -ms-border-radius: 4px; 
   -o-border-radius: 4px; 
   border-radius: 4px; 
   padding: 20px; 
} 

Kết luận:

Nếu bạn làm theo hướng dẫn mà bị lỗi thì hãy thử download mã nguồn demo về xem nhé.


https://github.com/sangnguyenplus/angular-modal

Vậy là chúng ta đã xây dựng được những xử lý cơ bản với modal, hi vọng bạn có thể hiểu và nắm bắt được nó để áp dụng vào dự án của mình.

Mình là 1 developer mới vào nghề, chưa có nhiều kinh nghiệm với lập trình web nhưng luôn muốn chia sẻ những hiểu biết của mình với các lập trình viên khác.
  • Địa chỉ: Hồ Chí Minh