как показать диалоговое окно подтверждения в 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
                                    });
                                });
                            }
            }
        })
}

Я хочу показать диалоговое окно подтверждения и хочу удалить, если использовать кнопку «Да». Но я не вижу ни одной кнопки в сообщении тостера и не знаю, как это сделать. Я сделал это точно так же, как в документации. И я хочу знать, можно ли в сообщении подтверждения поставить две кнопки?

Ответы на вопрос(2)

В случае, если кто-то НЕ хочет решения 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');
          });
        }
  });
 BrianLegg10 янв. 2017 г., 20:48
Это было именно то, что я искал!

Прежде всего вам нужно установить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 - первый.

Я полагаю, вы используетеУгловой тостерЕсли да, то сначала нужно знать, что у него нетonClick событие.onTap это событие, которое срабатывает при нажатии на тостер. но он срабатывает после того, как вы щелкнете в любом месте на toastr:

toastr.success("Content",'Title',
{
    onTap: function(){
       //Triggers when you click any where on toastr
    },
    ...
});

Поэтому я думаю, что вам нужно событие, которое срабатывает при нажатии кнопки, в этом случае, поскольку Angular Toastr не может принимать директивы в дуэте содержимого или заголовка по соображениям безопасности, вам необходимо прикрепить событие click к вашей кнопке внутри 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

надеюсь это поможет

 shamila09 июн. 2016 г., 06:20
кнопка становится видимой сейчас, но моя функция при нажатии не выполняется

Ваш ответ на вопрос