[英]how to show a confirmation dialog box in toastr
我有控制器中删除按钮的以下代码,
$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 消息中看不到任何按钮,我不知道该怎么做。 我完全按照文档中的说明做了。 我想知道是否可以在确认消息中放置两个按钮?
万一有人不是在 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');
});
}
});
首先,您需要像这样为 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组装了一个样品
希望这有帮助
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')
}
}
})
在 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');
}
});
如果要添加确认框,最好使用alertify,简单易懂,请看以下链接:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.