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

Question

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

$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消息中看不到任何按钮，也不知道该如何做。我已经完全按照文档的要求进行了操作。我想知道是否可能在确认消息中放置两个按钮？

- shamila

Answer 1

如果有人不是在寻找Angular的解决方案，而是回归基础知识，那么这里有一个非常简单的方法。

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

- Bogdan Trusca

---

这正是我正在寻找的！ - BrianLegg

Answer 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的标题为第二个参数，内容为第一个参数。

我猜你正在使用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上组装了一个样本。

希望这可以帮到你。

- hsh

---

按钮现在可见了，但我的点击函数没有执行。 - shamila

这个例子的唯一前进方式是选择“是”。如果你想取消怎么办？ - brt

Answer 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')  
      }
    }

})

- MNinaut

Answer 4

使用angularjs中的toaster确认弹出窗口 请点击此处 >> 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');
  }
});

- Ani

Answer 5

为什么不呢

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

- shajin

---

顺便说一下，我正在使用react/redux的toastr（https://github.com/diegoddox/react-redux-toastr）。我对angularjs没有太多的了解。 - shajin

toastr.confirm不存在。 - Plasebo