指令-arModal-点击提示框模板

html 使用<ar-modal></ar-modal>：

<ar-modal
modal-obj="modalObj"
ok="newAlarmClear($index)"
confirm-msg="{{'确定删除选定的告警任务？此操作无法撤销！'|translate}}"
ar-title = "{{'提示'|translate}}"
>
<button
class="btn btn-danger ng-scope"
aria-label="Clear"
data-test-subj="clearButton">
<span class="sr-only ng-scope" translate="">Clear</span>
<i aria-hidden="true" class="fa fa-trash-o"></i>
</button>
</ar-modal>

属性说明：1,2选一，默认取2的值

1.js文件传值（）

modal-obj="modalObj" //js文件提供的对象 对象规范：

$scope.modalObj = {

'title': '提示',//提示头部

'msg': 'xxx',//提示语

'ok':function(){}//确定按钮执行的函数

}

2.html 属性传值
ok="newAlarmClear($index)"//确定按钮执行的函数
confirm-msg="{{'确定删除选定的告警任务？此操作无法撤销！'|translate}}"//提示语
ar-title = "{{'提示'|translate}}"//提示头部

ui\public\directives\ar_modal.js:

js:文件

//luo.chunxiang
//2017/3/22
import html from 'ui/directives/modal/ar_modal.html';
import uiModules from 'ui/modules';
import 'ui/directives/modal/style.css';
import 'ui/ar_safe_modal';

uiModules
  .get('kibana')
  .directive('arModal', function ($modal, $translate, $translatePartialLoader, safeModal) {
    return {
      restrict: 'E',
      scope: {
        modalObj: '=',
        ok: '&'
      },
      controller: function ($scope) {
        $translatePartialLoader.addPart('../plugins/kibana');
        $translate.refresh();
      },
      link: function (scope, element, attrs) {
        scope.ok = attrs.ok ? scope.ok : null;
        scope.msg = attrs.confirmMsg ? attrs.confirmMsg : null;
        scope.title = attrs.arTitle ? attrs.arTitle : null;
        element.bind('click', function () {
          //ConfirmService.open(attrs.confirm);
          var modalConfirmInstance = $modal.open({
            template: html,
            controller:['$scope', '$modalInstance', function ($scope, $modalConfirmInstance) {
              //get obj from parent Controller
              $scope.modalObj = scope.modalObj || {};
              $scope.title = scope.title || $scope.modalObj.title || safeModal && safeModal.title;//头部
              $scope.msg = scope.msg || $scope.modalObj.msg || safeModal && safeModal.msg;//body信息
              $scope.ok = scope.ok || $scope.modalObj.ok || safeModal && safeModal.ok;


              //$scope 是此控制器作用域对象 ，而 scope是继承了父作用域对象从而创建一个新的作用于对象，可以访问父类中的方法和属性
              $scope.confirm = function () {
                $scope.ok();   //run the parent controller method
                $modalConfirmInstance.close(true);
              };
              $scope.cancel = function () {
                $modalConfirmInstance.dismiss('cancel');
              };
            }],
            windowClass: 'confirmModal', // 自定义modal上级div的class
            size: 'sm'//大小配置
          });
          return modalConfirmInstance;
        });


      }
    };
  });

'ui/directives/modal/style.css';

.confirmModal .modal-body {
  height: 124px;
}

.confirmModal .modal-body .hint-contents{
    width: 100%;
    height: 90px;
    padding: 0px 20px;
    word-wrap:break-word;
}
.confirmModal .modal-body .hint-area{
    display: block;
    width: 80%;
    height: 100%;
    float: right;
}
.confirmModal .modal-body .hint-icon{
    display: block;
    width: 20%;
    height: 100%;
    float: left;
    color: #da0000;
}
.confirmModal .modal-body .hint-icon a{
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("~ui/images/hint.svg");
}

ui/directives/modal/ar_modal.html

<div class="modal-header">
  <p class="modal-title" translate>{{title}}</p>
  <button type="button" class="close" aria-label="Close" ng-click="cancel()">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="modal-body">
  <div class="hint-contents">
    <!--     <span class="hint-icon"><i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i></span> -->
    <div class="hint-icon"><a></a></div>
    <div class="hint-area">
      <div class="hint-msg"><span translate>{{msg}}</span></div>
      <div class="hint-check" ng-if="check">
        <input class="hint-checkbox" type="checkbox" ng-model="formData" ng-click="updateSelection($event,formData)"/>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span translate>应用于本次导入的所有对象</span></span>
      </div>


    </div>
  </div>
</div>
<div class="modal-footer">
  <div class="hint-button">
    <button type="button" ng-click="confirm()" class="btn btn-default button-ok"><span translate>确定</span>
    </button>
    <button type="button" ng-click="cancel()" class="btn btn-primary button-cel"><span
      translate>取消</span></button>
  </div>
</div>

ui/ar_safe_modal

//luo.chunxiang
//2017.3.23
import uiModules from 'ui/modules';
import SafeModal from 'ui/ar_safe_modal/safeModal';
import $ from 'jquery';
import html from 'ui/directives/modal/ar_modal.html';
import 'ui/directives/modal/style.css';
//let rootSafeModal = new SafeModal();
uiModules.get('kibana')
.factory('safeModal', function () {
  return SafeModal;

})
.factory('arSafeModalYes', function ($window, $timeout, $q,safeModal) {
  return function arSafeModalYes(message) {
    return $timeout(function () {
      //return safeModal.flag || $q.reject(false);
      return true;
    });
  };
})
.factory('arSafeModalNo', function ($window, $timeout, $q,safeModal) {
  return function arSafeModalNo(message) {
    return $timeout(function () {
      //return safeModal.flag || $q.reject(false);
      return $q.reject(false);
    });
  };
})

.factory('arSafeModal', function ($window, $timeout, $q,safeModal) {

  return function arSafeModa(ok,msg,check,title) {
    $timeout(function () {
      var $v = $('#safeMe');
      safeModal.ok = ok;
      if (msg) {
        safeModal.msg = msg;
      }
      if (check !== undefined || check !== null) {
        safeModal.check = check;
      }
      if (title) {
        safeModal.title = title;
      }
      $v.click();
    });
  };
})
.service('arSafeModalMult', function ($window, $timeout, $q,safeModal) {
  let flag = 0;
  let show = true;
  let arSafeModalMult = function (ok,msg,check,cel,title) {

    var $v = $('#safeMeMult');
    safeModal.ok = ok;
    safeModal.cel = cel;
    if (msg) {
      safeModal.msg = msg;
    }
    if (check !== undefined || check !== null) {
      safeModal.check = check;
    }
    if (title) {
      safeModal.title = title;
    }
    $v.click();

  };
  return arSafeModalMult;

})
;