angularjs 自定义指令弹窗
(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>'); })();