angularjs自定义确认框

前端之家收集整理的这篇文章主要介绍了angularjs自定义确认框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我正在尝试使用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',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,text) {
                var yesBtn = element.find("[name='yes']");
                element.show();
                yesBtn.unbind("click").bind("click",function() {
                    scope[func](obj);
                });
            });
        }
    }
});

有人有主意吗?我首先添加了按钮的指令,然后取消绑定click事件,因此ng-click不会触发.然后我从ng-click属性删除字符串’delete(foo)’,我可以用$parse(attrs.ngClick)(范围)执行,但我不知道如何将它与单独的指令按钮联系起来单击.

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

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

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

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

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

猜你在找的Angularjs相关文章