正文
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>');
})();
