javascript - 扩展 angularUI 弹出框指令以创建确认弹出框

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>

以及这个指令的截图: