带有确认弹出窗口的自定义指令按钮 [英] 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>在当前实现中拒绝.

所以我想要的指令结果如下:

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>

我尝试使用替换 false 和 true 进行 trnsculation，但无法实现此功能.

I tried trnsculation with replace false and true but not able to achieve this functionality.

推荐答案

我使用了你的 plunker 并更改了 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>

更新的 plunker 链接:https://plnkr.co/edit/Bmcqqe32Px25pFCf0Mus?p=preview

Updated plunker link : https://plnkr.co/edit/Bmcqqe32Px25pFCf0Mus?p=preview

这篇关于带有确认弹出窗口的自定义指令按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！