angularjs 自定义指令弹窗
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | ( function () { 'use strict' ; angular.module( 'frontierApp' ) .directive( 'confirmPopup' , [ '$timeout' , ConfirmPopupDirective]) .directive( 'messageTips' , [ '$timeout' , '$rootScope' , MessageTipsDirective]); function ConfirmPopupDirective($timeout) { var directive = { restrict: 'A' , scope: { confirmPopup: '&' , confirmTitle: '=' , confirmContent: '=' , }, link: link, transclude: true , template: '<div class="trans-clude" ng-transclude ng-click="show()"></div>' + '<div class="modal fade confirm-modal">' + '<div class="modal-dialog">' + '<div class="modal-content">' + '<div class="modal-header">' + '<span class="close ES3iconfont ES3icon-icon-closs" ng-click="close()"></span>' + '<h4 class="modal-title" ng-bind="confirmTitle"></h4>' + '</div>' + '<div class="modal-body"><i class="iconfont icon-warning"></i>' + '<p ng-bind="confirmContent"></p>' + '</div>' + '<div class="modal-footer">' + '<button class="button-cancel" ng-click="close()">取消</button>' + '<button class="button-confirm" ng-click="confirm()">确定</button>' + '</div>' + '</div>' + '</div>' + '</div>' }; return directive; function link(scope, element, attrs) { scope.show = function () { element.find( '.modal' ).modal(); }; scope.close = function () { element.find( '.modal' ).modal( 'hide' ); }; scope.confirm = function () { element.find( '.modal' ).modal( 'hide' ); $timeout( function () { scope.confirmPopup(); }, 500); }; } } function MessageTipsDirective($timeout, $rootScope) { var directive = { restrict: 'EA' , link: link, replace: true , template: '<div class="message-tips"></div>' }; return directive; function link(scope, element, attrs) { //level: success,error $rootScope.showMessage = function (title,message, level, delay) { var tip = angular.element( '<div class="alert message-tip" >\ <div class="message-tip-header">' +title+ '\ <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span></button>\ </div><div class="message-tip-body"><i class="iconfont icon-' +level+ ' iconSuccess"></i>' + message + '</div></div>' ).appendTo(element); tip.addClass( 'alert-' + level); if (delay) { $timeout( function () { tip.alert( 'close' ); }, delay * 1000); } element[0].addEventListener( 'click' , function (e){ if (e.target.nodeName === 'BUTTON' ){ if (message == '请选择要恢复的数据源' ){ // location = } } }) }; } } angular.element( 'body' ).append( '<div message-tips></div>' ); })(); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步