指令-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">×</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> <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; }) ;