加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

angularjs自定义确认框

发布时间:2020-12-17 08:20:22 所属栏目:安全 来源:网络整理
导读:所以我正在尝试使用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 thi
所以我正在尝试使用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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读