angularjs自定义确认框

Question

所以我正在尝试使用Angular实现自定义确认框.理想情况下,我只想添加一个属性来启用该功能.例:

<button type="button" ng-click="delete(foo)">Delete</button>  ->  <button type="button" ng-click="delete(foo)" ng-confirm="Are you sure you want to delete this foo?">Delete</button>

(foo在fooList中的ng-repeat ... foo里面...)

因此,我所遇到的所有问题都围绕着通常发生在不同按钮上的点击事件.我有一个单独的指令"confirmBox",它将创建我的模态(不使用引导程序)并处理所有显示/隐藏/等.

我目前使用的是要求我改变我的ng-click功能,我真的想摆脱它:

目前的实施:

<button ... ng-click="confirm('Are you sure you want to delete this foo?, 'delete', foo)">Delete</button>

var confirmModule = angular.module('confirm', []);

confirmModule.run(function($rootScope) {
    $rootScope.confirm = function(text, func, obj) {
        $rootScope.$broadcast('confirm', func, obj, text);
    };
});

confirmModule.directive('confirmBox', function($parse) {

    return {
        restrict: 'A',
        template: myModalTemplate,
        link: function(scope, element, attrs){
            element.hide();
            var noBtn = element.find("[name='no']");
            noBtn.bind("click", function() {
                element.hide();
            });
            scope.$on("confirm", function(event, func, obj, text) {
                var yesBtn = element.find("[name='yes']");
                element.show();
                yesBtn.unbind("click").bind("click", function() {
                    scope[func](obj);
                });
            });
        }
    }
});

有人有主意吗？我开始添加按钮的指令,然后取消绑定click事件,因此ng-click不会触发.然后我留下了我可以执行'delete(foo)'的ng-click属性中的字符串$parse(attrs.ngClick)(scope),但我不知道如何将其与单独的指令按钮单击相关联.

编辑:这是我目前尝试实施的一个小提琴.问题是传递给函数的变量总是未定义的.

http://jsfiddle.net/UCtbj/2/

Edit2:更新了实现,但我并不特别喜欢它如何通过定位其他指令元素将两个指令链接在一起.

http://jsfiddle.net/UCtbj/3/

Answer 1

在我看来,你正试图从指令中的jQuery方式做事.但是,您想要的就像拉入UI-Bootstrap指令以确认操作一样简单. http://plnkr.co/edit/JhfAF1?p=preview

Answer 2

我为此功能创建了一个存储库。它包装 ui-bootstrap 模式以生成确认框。它是可定制的，并且可以轻松集成到任何应用程序中。

以下是 GitHub 的链接： https: //github.com/Schlogen/angular-confirm

用法示例：

作为指令：

 <button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>

作为服务：

$confirm({text: 'Are you sure you want to delete?'})
  .then(function() {
    $scope.deletedConfirm = 'Deleted';
  });