Angularjs 带有确认弹出窗口的自定义指令按钮

我有一个按钮指令如下（Plunker是）：

---

我尝试了用replace false和true进行计算，但未能实现此功能

在

链接

函数中，您可以取消/注册事件处理程序并执行任何DOM操作。因此，您可以在此处添加确认功能以及按钮内容和类。要重用ng click处理程序，请在绑定自己的处理程序之前取消绑定“click”事件

return {    
    priority: 1,
    compile: function(elem, attr) {
      var text = attr.confirmPopupText;
      var callback = $parse(attr.ngClick);
      elem.html('<span>Any HTML</span>Reject');
      elem.addClass('btn btn-danger btn-xs');  

      return function(scope, elem, attr) {
        elem.unbind('click').bind('click', function(event) {
          var result = $window.confirm(text);  // use $modal here instead        
          callback(scope, {result: result, $event : event});
          scope.$apply(scope.ngClick);
        });
      }
    }
}

返回{
优先事项：1，
编译：函数（元素、属性）{
var text=attr.confirmPopupText；
var callback=$parse（attr.ngClick）；
elem.html（“任何HTMLReject”）；
元素添加类（“btn btn危险btn xs”）；
返回函数（范围、元素、属性）{
元素解除绑定（'click'）。绑定（'click'，函数（事件）{
var result=$window.confirm（text）；//在此处改用$modal
回调（作用域，{result:result$event:event}）；
scope.$apply（scope.ngClick）；
});
}
}
}

您可以将此指令用作

<div ng-app="app" ng-controller="Main as view">
  <button data-confirm-popup-text="Do you want to reject"  
          confirm-button ng-click="view.onConfirm($event, result)">
  </button>
</div>

---

我使用了你的plunker并更改了app.js，从第14行移到最后，替换这个指令应该可以让你达到你想要的目的

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; 
    }

app.directive（“confirmpopext”，confirmpopext）；
confirmPopupText.$inject=['$uibModal'、'$compile'、'$parse']；
函数confirmPopupText（$modal、$compile、$parse）{
var指令={}；
directive.restrict='A'；
directive.link=函数（范围、元素、属性）{
//获取ngClick func的引用
var模型=$parse（attrs.ngClick）；
//删除ngClick和handler func
元素属性（'ng-click'，null）.off（'click'）；
元素绑定（'click'，函数（e）{
e、 停止即时复制（）；
console.log（'Clicked'）；
$modal.open({
模板：'+attrs.confirmPoputReader++'+'+'+attrs.confirmPoputText++'+'+'+'+''+'是'+'否'+''，
控制器：函数（$scope$uibModalInstance）{
$scope.ok=函数（）{
$uibModalInstance.close（）；
//此行将从外部作用域调用ngClick func
模型（范围）；
};
$scope.cancel=函数（）{
$uibModalInstance.discover（'cancel'）；
};
}
});
});
};
返回指令；
}

这样你就可以像那样使用html了

<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>

基于，您可以覆盖或修改AngularJS中的任何服务，包括指令：

app.config(function($provide){
   $provide.decorator('ngClickDirective', ['$delegate', function($delegate) {
      //$delegate is array of all ng-click directive
      //in this case frist one is angular buildin ng-click
      //so we remove it.
      $delegate.shift();
      return $delegate;
   }]);
});

app.directive('ngClick', function($rootScope) {
  return {
    restrict: 'A',
    priority: 100,
    link: function($scope, element, attr) {
      element.bind('click', function($event) {
        // emit event to manage modal if 'popup' attr is exist
        if (attr.hasOwnProperty('popup')) {
            // and pass arguments
            $scope.$emit('popup-click', { $scope, element, attr }); 
        } else {
            // else just execute default 'ng-click' handler
          $scope.$apply(attr.ngClick)
        }
      })
    }
  }
})

并管理工厂中的弹出窗口：

app.factory('popupService', function($rootScope) {
    $rootScope.$on('popup-click', function(e, args) {
        // click with popup attr observer
        // there needs to be your code to manage modal
        // you can pass any params for example as 'popup-title="i am a title"' and get it there with 'args.attr'
        if (confirm(args.attr.popupText || 'Default text')) {
            args.$scope.$apply(args.attr.ngClick)
        } else {
            // nothing to do
        }
    });
    return {};
});

我创建了一个完整的示例

希望它能对您有所帮助。
您可以使用ng click=“dialogFun（）”编写一个函数dialogFun，在其中添加确认弹出类或将其css从hidden更改为block.No。我有很多钮扣。每个按钮都有一些功能，可以单击
ng
。我想建立这个指令以便于集成。因为有些按钮需要这个功能，有些则不需要。哦，我明白了，那么你应该定义一个属性指令，它生成我之前写的内容，并在需要时包含它。当我在家的时候，我会尝试去实现它。这就是我正在尝试的。但是做不到。请看我的plunker，你的plnkr有什么问题吗？很好。棒 极 了正是我想要的。让我试试我的工作区。您在这里使用了$parse。这就是魔力感谢您的回答。您可以从$parse服务获得一个函数，用于任何字符串形式的javascript语句。然后你可以使用这个函数在任何给定的范围内计算这个句子，是的，它是神奇的：）这也是ng clik覆盖的一个很好的例子。但在每次点击事件中，它都会检查
是否（attr.hasOwnProperty（'popup'））
我想。
app.config(function($provide){
   $provide.decorator('ngClickDirective', ['$delegate', function($delegate) {
      //$delegate is array of all ng-click directive
      //in this case frist one is angular buildin ng-click
      //so we remove it.
      $delegate.shift();
      return $delegate;
   }]);
});

app.directive('ngClick', function($rootScope) {
  return {
    restrict: 'A',
    priority: 100,
    link: function($scope, element, attr) {
      element.bind('click', function($event) {
        // emit event to manage modal if 'popup' attr is exist
        if (attr.hasOwnProperty('popup')) {
            // and pass arguments
            $scope.$emit('popup-click', { $scope, element, attr }); 
        } else {
            // else just execute default 'ng-click' handler
          $scope.$apply(attr.ngClick)
        }
      })
    }
  }
})

app.factory('popupService', function($rootScope) {
    $rootScope.$on('popup-click', function(e, args) {
        // click with popup attr observer
        // there needs to be your code to manage modal
        // you can pass any params for example as 'popup-title="i am a title"' and get it there with 'args.attr'
        if (confirm(args.attr.popupText || 'Default text')) {
            args.$scope.$apply(args.attr.ngClick)
        } else {
            // nothing to do
        }
    });
    return {};
});