web-dev-qa-db-ja.com

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メッセージにボタンが表示されず、その方法がわかりません。ドキュメントとまったく同じように実行しました。そして、確認メッセージに2つのボタンを入れることができるかどうか知りたいですか？

javascriptangularjstoastr
4
shamila

誰かが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');
          });
        }
  });
7
Bogdan Trusca

まず、次のように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は2番目の引数であり、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;

  }
});

プランカー でサンプルを組み立てました

お役に立てれば

2
hsh
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')  
      }
    }

})
0
MNinaut