刪除按鈕上的確認對話框

Question

我正在使用Angular的應用程序。

我目前有一個刪除按鈕，它有一個附加到onClick()的確認

<a class="delete button" href="#" onClick="return confirm('Are you absolutely sure you want to delete?')" ng-click="remove_user(user, $event)" ></a>

問題是當確認彈出時，“確定”和“取消”都刪除了該項目，我錯過了什么“取消”才能取消？

Answer 1

也許只是使用角度點擊處理程序並執行確認邏輯，值得一試。

function FooController($scope, $window) {
  $scope.removeUser = function() {
    var deleteUser = $window.confirm('Are you absolutely sure you want to delete?');

    if (deleteUser) {
      $window.alert('Going to delete the user');
    }
  }
}

 function FooController($scope, $window) { $scope.removeUser = function() { var deleteUser = $window.confirm('Are you absolutely sure you want to delete?'); if (deleteUser) { $window.alert('Going to delete the user'); } } } 

 body { padding: 0; margin: 0; background: #3FA8C6; background-image: -moz-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa8c6), color-stop(0%, #3fa8c6), color-stop(100%, #399ab2)); background-image: -webkit-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%); background-image: -o-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%); background-image: -ms-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%); background-image: linear-gradient(to bottom, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%); color: #fff; font-family: 'Doppio One', sans-serif; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); line-height: 1.5; -webkit-font-smoothing: antialiased; } .wrapper { width: 50%; margin: 0 auto; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.03em; font-size: 2em; } a { border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.7); padding-bottom: 0.15em; position: relative; color: white; text-decoration: none; } a:after { content: ''; position: absolute; height: 1px; left: 0; right: 0; bottom: -2px; background: rgba(0, 0, 0, .1); } a:hover { color: #C0E3EC; } h1 { margin: 0.667em 0 0; padding-left: 0.5em; text-align: left; } h2 { font-size: 1.5em; } small { margin-top: 1em; display: block; font-style: italic; font-size: 0.667em; } p em { font-style: none; } #welcome { position: relative; overflow: hidden; padding-bottom: 1em; padding-left: 20px; } #welcome > div { padding-top: 1px; } #dave { float: left; margin-top: 3em } #welcome > h2 { margin-top: 0.5em; padding-left: 0.5em; margin-bottom: 0; } .bubble p { line-height: 22px; } .bubble { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.1); padding: 0.667em 1em; position: relative; } .bubble:after { content: ""; position: absolute; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-right: 20px solid white; border-right-color: inherit; top: 50px; left: -20px; } #features { margin: 0.444em 0 0; clear: both; } #features > h2 { margin: 0; } #features ol { position: relative; padding: 1em 0 1.5em; background: rgba(0, 0, 0, .1); border-color: rgba(0, 0, 0, .1); margin: 0; overflow: hidden; list-style: none; counter-reset: item; } #features li { width: 30%; padding: 0 1.5%; float: left; text-align: center; margin-bottom: 1em; } #features li h2 { display: block; padding: 1em; margin: 0.667em auto 1em; font-size: 1em; line-height: 1em; text-align: center; background: rgba(0, 0, 0, .1); border-radius: 2em; box-shadow: inset 0 0 1em rgba(0, 0, 0, .1), 0 2px 2px rgba(255, 255, 255, .1); } #next > div { width: 45%; float: left; padding: 0 2.5%; } img { z-index: 1; -webkit-transition: -webkit-transform 2s ease-in-out; -moz-transition: -moz-transform 2s ease-in-out; -o-transition: -o-transform 2s ease-in-out; -ms-transition: -ms-transform 2s ease-in-out; transition: transform 2s ease-in-out; position: relative; } img:active { -webkit-transform: rotate(1440deg) scale(1.2); -moz-transform: rotate(1440deg) scale(1.2); -o-transform: rotate(1440deg) scale(1.2); -ms-transform: rotate(1440deg) scale(1.2); transform: rotate(1440deg) scale(1.2); } @media screen and (max-width: 1200px) { .wrapper { width: 80%; } } @media screen and (max-width: 768px) { .wrapper { width: auto; margin: 0; } #welcome { margin-right: 2.5%; } } @media screen and (max-width: 500px) { .wrapper { text-align: center; } #dave { float: none; } #welcome { padding: 0 1.5em; margin: 0; } h1 { text-align: center; margin-bottom: 0; padding-left: 0; font-size: 1.8em; } #welcome > h2 { margin-bottom: 0.667em; } .bubble { text-align: center; } .bubble:after { display: none; } #features li { width: 47%; } #features li:last-child { float: none; clear: both; margin: 0 auto; } #next > div { float none; width: auto; } } 

 <html ng-app ng-controller="FooController"> <body> <a class="delete button" href="#" ng-click="removeUser(user, $event)">Delete</a> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script> </body> </html> 

Answer 2

這有點晚了，但對於未來的讀者來說，就像我15分鍾前一樣：

該“ 角辦法 ”將創造一個指令，因為在這里建議 ：

'use strict';

angular.module('confirm', [])
    .directive('confirm', [function () {
        return {
            priority: 100,
            restrict: 'A',
            link: {
                pre: function (scope, element, attrs) {
                    var msg = attrs.confirm || "Are you sure?";

                    element.bind('click', function (event) {
                        if (!confirm(msg)) {
                            event.stopImmediatePropagation();
                            event.preventDefault;
                        }
                    });
                }
            }
        };
    }]);

---

用法：

<button ng-click="save()" confirm="Save Changes?">Save</button>

Answer 3

如果您使用bootstrap進行UI ，我建議使用angular-dialog-service 。 一旦包含模塊依賴項，就可以像這樣確認它。

function FooController($scope, $dialogs)
{
  $scope.removeUser = function() {
    var dlg = dialogs.confirm('Please Confirm', 'Are you absolutely sure you want to delete?');
    dlg.result.then(function () {
      console.log("User has confirmed");//do something when user confirms
    },function(){
      console.log("User has cancelled");//do something when user cancels. Can omit the 2nd function if no handling is required
    });
  }
}

有關詳細信息，請參閱此示例 。

Answer 4

它可能對其他人有幫助

HTML代碼示例

<button confirmed-click="removeRowIndex(col, row)" 
        ng-confirm-box-click="Are you sure want to delete?" 
        class="btn btn-xs btn-default"/>

AngularJs代碼示例

app.directive('ngConfirmBoxClick', [

      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick;
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);

Answer 5

只需替換下面的onclick方法即可。

onclick="javascript:return confirm('Are you absolutely sure you want to delete?')"

Answer 6

<a class="delete button" href="#" onClick="return false" ng-click="if(confirm('Are you absolutely sure you want to delete?')){remove_user(user, $event);}" ></a>

試試這個？ 我認為這與您停止默認的“onclick”偵聽器但不影響“ng-click”偵聽器這一事實有關。 相反，我將確認邏輯移動到“ng-click”監聽器並“返回false”onclick，因為您不希望鏈接將您帶走。

Answer 7

那么我會創建一個函數來勾選一個全局變量並在提交時檢查它

<form onsubmit='check_delete()'
<input type='submit' onclick='set_delete()' 

使用Javascript

 function set_delete(){delete_flag = 1 ;} // this is a global var set by default to 0
 function check_delete(){if(delete_flag == 1) confirm(''sure?);}