扩展angularUI popover指令以创建确认弹出窗口

Question

我正在尝试在angularJS中创建一个简单的确认弹出窗口。我已经将AngularUI用于许多其他组件，这就是为什么它似乎是扩展的自然选择。

我在plnkr中创建了一个示例但是我希望能够简单地在这样的按钮上添加一个确认...

<button confirm="Are you sure you want to delete what ever" confirm-func="deleteThing()" confirm-placement="right" confirm-title="Are you sure?" class="btn btn-default">Delete?    </button>

这样可以使用我自己的模板取消或确认弹出窗口。但我需要能够通过“confirm-func”属性中的任何功能来确认点击运行。我做什么我无法让它发挥作用。这是我的指令，它扩展了angularUI ...

angular.module('plunker', ['ui.bootstrap']).directive( 'confirmPopup', function () {
  return {
    restrict: 'A',
    replace: true,
    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&', func: '&' },
    templateUrl: 'confirmPopup.html',
    link: function ($scope, element, attrs) {
      $scope.confirm = function(){

        $scope.func();//here is where we want to run the function, but it does not work!
        $scope.$parent.tt_isOpen = false;
      }
      $scope.cancel = function(){
        $scope.$parent.tt_isOpen = false;
      }
    }
  };
})
.directive( 'confirm', [ '$tooltip', function ($tooltip) {
    return $tooltip( 'confirm', 'confirm', 'click' );
}]);

附上了Plunkr示例：http://plnkr.co/edit/W9BWMc3x5khuaMEL7lp1?p=preview

Answer 1

这不是您具体问题的直接答案，但我希望在我的项目中做一些类似的事情（一个确认弹出窗口的简单指令），并最终使用此博客文章中的解决方案：

http://wegnerdesign.com/blog/angular-js-directive-tutorial-on-attribute-bootstrap-confirm-button/

它对我来说一直很好。我稍微修改了它，以便通过属性应用自定义CSS类。我的修改在这里：

https://github.com/sergkr/swot/blob/master/client/directives/confirmButton.js

使用示例：

<button type="button" confirm-button="deleteQuestion($index)" message="Are you sure you want to remove this question?"></button>

该指令的屏幕截图：

Answer 2

无法直接传递confirm-func参数。您需要自己实现tooltip指令而不是$ tooltip服务。有肮脏的解决方案，但我不推荐这样：

您可以使用

$scope.$parent.deleteThing();

而不是

$scope.func();//here is where we want to run the function, but it does not work!

Answer 3

我设法做你需要的东西，即使它感觉有点hackish。 我做了plunk

基本上，诀窍是将你自己的控制器注入到新指令实例中 $ tooltip返回。

var tt = $tooltip( 'confirm', 'confirm', 'click' );
tt.controller = 'ConfirmCtrl';
return tt;

你必须调整你的Popopver模板，以便他们可以调用你的控制器方法

<button class="btn-block btn btn-danger" ng-click="$parent.confirm()">Confirm </button>

最新作品是从您的控制器调用确认处理程序

var fn = $parse($attrs.confirmHandler);

$scope.confirm = function(){
  fn($scope);
  $scope.tt_isOpen  = false;
};

希望它有所帮助！ 我不是角度专家，所以欢迎任何有关该方法的意见/反馈。