角型グローバル確認ボックス

グローバル確認ボックスは、ポップアップモーダルボックスを改良したものです。

設定方法

テンプレート

angular.module('custom-template', [])
.run(["$templateCache", function($templateCache) {
  $templateCache.put("template/modal/confirmModelTemplate.html",
    '<div class="m-c">\n'+
    ' <div class="modal-header">\n'+
    ' <h4 class="modal-title">{
{title}}</h4>\n'+
    ' </div>\n'+
    ' <div class="modal-body">{
{content}}</div>\n'+
    ' <div class="modal-footer" style="text-align: center;">\n'+
    ' <button type="button" class="btn btn-primary" ng-click="ok()">ok</button>\n'+
    ' <button type="button" class="btn btn-warning" ng-click="cancel()">cancel</button>\n'+
    ' </div>\n'+
    ' </div>\n'+
    "");
}]);

定義されたテンプレート・モジュールは、システム内で次のように参照されます。

var app = angular.module('myApp', ['custom-template']);

呼び出し方法

カスタムコモンファクトリーで確認ボックスを開くためのメソッドを定義します。

angular.module('myApp').factory('Common', ['$http', '$q', '$cookieStore', '$location','$modal',
  function ($http, $q, $cookieStore, $location,$modal) {
    return {
      openConfirmWindow: function(modalTitle,modalContent,modalInstance) {
        var deferred = $q.defer();
        /*
        * modalInstance is the $modalInstance passed in from the first popup when the confirm confirmation box pops up on top of the popup,
        * If the confirmation box pops up directly on the page, you can't pass $modalInstance, otherwise it will report an error
        */
        var confirmModal = $modal.open({
          backdrop: 'static',
          templateUrl : 'template/modal/confirmModelTemplate.html', // point to the confirm box template
          controller : 'ConfirmCtrl',// initialize the modal controller
          windowClass: "confirmModal",// Customize the class of the modal's parent div
          size : 'sm', // size configuration
          resolve : {
            data : function(){
              return {modalTitle: modalTitle,modalContent: modalContent};//surgeonSug: $scope.surgeonSug,
            }
          }
        });
        // Process the data returned after the modal is closed
        confirmModal.result.then(function() {
          if(! !modalInstance) {
            modalInstance.dismiss('cancel');
          }
          deferred.resolve();
        },function(){
        });
        return deferred.promise;
      }
    }
  }]);

カスタムCSS

.confirmModal .modal-sm {
  width: 400px;
}
.confirmModal .modal-content {
  margin-top: 40%;
}
.confirmModal .modal-header {
  padding: 10px 15px;
}
.confirmModal .modal-body {
  padding: 10px 15px;
  border-top: 1px solid #e5e5e5;
}

使用方法

このページで使用されている具体的な方法は以下の通りです。

$scope.delete = function(id) {
  var modalTitle = 'Tip! ;
  var modalContent = 'Sure you want to delete?' ;
  Common.openConfirmWindow(modalTitle,modalContent).then(function() {
    $http.delete(url+id)
      .success(function() {
        $scope.load($scope.currSelSurgeon);
        $rootScope.lxAlert['success']('Deleted successfully!') ;
      }).error(function() {
        $rootScope.lxAlert['danger']('Deletion failed!') ;
      });
  });
};

ポップアップモーダルボックスで使用される特定のメソッド。

$scope.cancel = function(){
  var modalTitle = 'Sure to close?' ;
  var modalContent = 'The information filled in was not saved, please confirm to close?' ;
  Common.openConfirmWindow(modalTitle,modalContent,$modalInstance);
};

最初の使用では、3 番目のパラメータとして modalInstance を渡してはいけません、さもなければ、エラーが報告されます。2つ目は、ポップアップ確認ボックスの上にあるモーダルボックスを閉じるために $modalInstance を渡す必要があります。これで、グローバル確認ボックス全体の使用は完了です。
間違っているところがあれば、訂正してください