如何在 toastr 中显示确认对话框

Posted 2023-05-08

【中文标题】如何在 toastr 中显示确认对话框

【英文标题】：how to show a confirmation dialog box in toastr

【发布时间】：2016-10-08 16:13:10

【问题描述】：

我有以下代码用于控制器中的删除按钮，

$scope.removes = function (scope) 
        toastr.success("Delete all?","<br /><br /><button type='button' class='btn clear'>Yes</button>",
            closeButton: false,
            onClick: function()
                var nodeData = scope.$modelValue;
                            if(nodeData.nodes.length > 0)
                                toastr.error('Cant delete Sub levels available :', 'Warning', 
                                    closeButton: true
                                );
                            else
                                mainMenuService.deleteData(nodeData).success(function(data) 
                                    scope.remove();
                                    toastr.success(data.message, 'Message', 
                                        closeButton: true
                                    );
                                ).error(function(err) 
                                    toastr.error(err, 'Warning', 
                                        closeButton: true
                                    );
                                );
                            
            
        )

我想显示一个确认对话框，如果使用单击是按钮，我想删除。但是我在 toastr 消息中看不到任何按钮，我不知道该怎么做。我已经完全按照文档中的方式完成了。我想知道是否可以在确认消息中放置两个按钮？

【参考方案1】：

如果有人不追求 Angular 解决方案，而是回到这里的基础，那真的很简单。

toastr.success("<br /><br /><button type='button' id='confirmationRevertYes' class='btn clear'>Yes</button>",'delete item?',
  
      closeButton: false,
      allowhtml: true,
      onShown: function (toast) 
          $("#confirmationRevertYes").click(function()
            console.log('clicked yes');
          );
        
  );

【讨论】：

这正是我想要的！

【参考方案2】：

首先你需要像这样为 toastr 设置allowHtml: true 选项：

$scope.removes = function (scope) 
    toastr.success("<br /><br /><button type='button' class='btn clear'>Yes</button>",'delete item?',
    
        closeButton: false,
        allowHtml: true,
        ...
    )

toastr Title 也是第二个参数，content 是第一个参数。

我假设您使用的是Angular Toastr，如果是这样，首先您需要知道它没有任何onClick 事件。onTap 是您单击 toastr 时触发的事件。但它会在您单击 toastr 上的任何位置后触发：

toastr.success("Content",'Title',

    onTap: function()
       //Triggers when you click any where on toastr
    ,
    ...
);

所以我认为您想要一个在单击按钮时触发的事件，在这种情况下，只要 Angular Toastr 出于安全原因不能接受内容或标题部分中的指令，您需要将点击事件附加到你在 toastr 的 onShow 事件中的按钮如下：

$scope.yes = function() 
   alert("You Clicked Yes!!!");

var html = "<br /><br /><button type='button' class='btn clear'>Yes</button>";
toastr.success(html,'Are You Sure?',

  allowHtml: true,
  onShown: function (toast) 
    angular.element( toast.el[0]).find("button")[0].onclick = $scope.yes;

  
);

我在 Plunker 组装了一个样本

希望对你有帮助

【讨论】：

按钮现在可见，但我的点击功能没有执行

本示例的唯一方法是使用“是”。如果要取消怎么办？

【参考方案3】：

toastr.warning("<br /><button type='button' value='yes'>Yes</button><button type='button'  value='no' >No</button>",'Are you sure you want to delete this item?',

    allowHtml: true,
    onclick: function (toast) 
      value = toast.target.value
      if (value == 'yes') 
        console.log(toast.target.value, 'carai')  
      
    

)

【参考方案4】：

在 angularjs 中使用烤面包机的确认弹出窗口 给你>>http://plnkr.co/edit/Ri2ELEglunzesYkO

toastr.success(html,'Are You Sure?',

  allowHtml: true,
  timeOut: 50000,
  tapToDismiss: false,
  extendedTimeOut: 100000,
  onShown: function (toast) 
    angular.element( toast.el[0]).find("button")[0].onclick = $scope.yes;
    angular.element( toast.el[1]).find("button")[1].onclick = $scope.no;
  ,
  onTap:function()
    alert(($scope.yesno==true)? 'Yes':'No');
  
);

【参考方案5】：

如果要添加确认框。最好使用alertify。它易于使用和理解。请看下面的链接：

http://fabien-d.github.io/alertify.js/

【讨论】：

请同时插入一个如何使用它的示例。

【参考方案6】：

为什么不

toastr.confirm('Are you sure?', onOk: () =>  console.log('ok') , onCancel: () =>  console.log('cancel'))

【讨论】：

顺便说一句，我正在使用带有 react/redux 的 toastr (github.com/diegoddox/react-redux-toastr)。对angularjs不太了解

toastr.confirm 不存在