带有确认弹出框的自定义指令按钮 [英] Custom Directive Button with Confirm Popup
问题描述
我有一个如下的按钮指令(Plunker是此处):
I have a button directive as follows (Plunker is here):
<button type="button"
data-confirm-popup-btntext="Reject"
data-confirm-popup-text="Do you want to reject"
data-confirm-popup-header="Reject"
data-confirm-popup-click="reject(obj)"
class="btn btn-danger btn-xs"
data-ng-class="{disabled : disable}"
data-ng-if="show"></button>
我的按钮文本为data-confirm-popup-btntext
.我不想要的.我也不想要data-confirm-popup-click
.而是我想使用ng-click
.
I have data-confirm-popup-btntext
for button text. Which I do not want. I also do not want data-confirm-popup-click
. Rather I want to use ng-click
.
我的概念是,任何视图上都会有任何按钮.如果需要在处理之前显示确认对话框,则将一个属性(指令)添加到该按钮,该指令将处理所有问题.
My concept is, there will be any button on any view. If I need to display a confirm dialog before processing I will add one attribute(directive) to that button and that directive will take care everything.
我也无法在当前实现中添加<span class'bootstrap-icon'></span> Reject
.
Also I am not able to add <span class'bootstrap-icon'></span> Reject
in current implementation.
所以我期望的指令结果如下:
So my desired outcome of the directive is as follows :
<button type="button"
data-confirm-popup-header="Reject"
data-confirm-popup-text="Do you want to reject"
<!--Above line two line will add confirm dialog functionality -->
data-ng-click="reject(obj)"
class="btn btn-danger btn-xs"
data-ng-class="{disabled : disable}"
data-ng-if="show"><span>Any HTML</span>Reject</button>
我尝试用trsesculation替换false和true,但无法实现此功能.
I tried trnsculation with replace false and true but not able to achieve this functionality.
推荐答案
我用了您的插件,并更改了app.js,从第14行删除到最后,并替换了该指令,应该可以使您到达想要的位置;
I used your plunker and changed app.js, removing from line 14 to the end and replacing this directive should get you to the point you want;
app.directive("confirmPopupText",confirmPopupText);
confirmPopupText.$inject = ['$uibModal', '$compile', '$parse'];
function confirmPopupText ( $modal, $compile, $parse){
var directive = {};
directive.restrict = 'A';
directive.link= function(scope, elem, attrs) {
// get reference of ngClick func
var model = $parse(attrs.ngClick);
// remove ngClick and handler func
elem.prop('ng-click', null).off('click');
elem.bind('click' , function(e) {
e.stopImmediatePropagation();
console.log('Clicked');
$modal.open({
template: '<div class="modal-header">'+attrs.confirmPopupHeader+'</div>'+'<div class="modal-body">'+attrs.confirmPopupText+'</div>'+'<div class="modal-footer">'+'<button class="btn btn-primary" data-ng-click="ok()">Yes</button>'+'<button class="btn btn-warning" data-ng-click="cancel()">No</button>'+'</div>',
controller: function($scope, $uibModalInstance) {
$scope.ok = function () {
$uibModalInstance.close();
// this line will invoke ngClick func from outer scope
model(scope);
};
$scope.cancel = function () {
$uibModalInstance.dismiss('cancel');
};
}
});
});
};
return directive;
}
这样您就可以使用html了;
So that you can use the html like that;
<button type="button"
data-confirm-popup-header="Reject"
data-confirm-popup-text="Do you want to reject"
<!--confirmPopupText directive will add confirm dialog functionality -->
data-ng-click="reject(obj)"
class="btn btn-danger btn-xs"
data-ng-class="{disabled : disable}"
data-ng-if="show"><span>Any HTML</span>Reject</button>
更新的插件链接: https://plnkr.co/edit/Bmcqqe32Px25pFCf0Mus?p=preview
这篇关于带有确认弹出框的自定义指令按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!