Javascript “删除”按钮上的“确认”对话框

我正在使用Angular的应用程序

我目前有一个删除按钮，它在

onClick（）上附加了一个确认



问题是，当确认弹出时，“确定”和“取消”都会删除该项目，我缺少什么来让“取消”简单地取消？

<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”侦听器和“return false”中“再次单击，因为您不希望链接将您带走。
可能只是使用角度单击处理程序并在那里执行确认逻辑值得一试

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


函数控制器（$scope，$window）{
$scope.removeUser=函数（）{
var deleteUser=$window.confirm（'您绝对确定要删除吗？'）；
如果（删除用户）{
$window.alert（'将删除用户'）；
}
}
}
正文{
填充：0；
保证金：0；
背景：#3FA8C6；
背景图像：-莫兹线性梯度（顶部，#3fa8c6 0%，#3fa8c6 0%，#399ab2 100%）；
背景图像：-webkit渐变（线性、左上、左下、颜色停止（0%、#3fa8c6）、颜色停止（0%、#3fa8c6）、颜色停止（100%、#399ab2））；
背景图片：-webkit线性渐变（顶部，#3fa8c6 0%，#3fa8c6 0%，#399ab2 100%）；
背景图像：-o-线性梯度（顶部，#3fa8c6 0%，#3fa8c6 0%，#399ab2 100%）；
背景图像：-ms线性梯度（顶部，#3fa8c6 0%，#3fa8c6 0%，#399ab2 100%）；
背景图像：线性渐变（至底部，#3fa8c6 0%，#3fa8c6 0%，#399ab2 100%）；
颜色：#fff；
字体系列：“Doppio One”，无衬线；
文本阴影：0 1px 0 rgba（0,0,0,3）；
线高：1.5；
-webkit字体平滑：抗锯齿；
}
.包装纸{
宽度：50%；
保证金：0自动；
}
h1，
h2，
h3，
h4，
h5，
h6{
字母间距：-0.03em；
字号：2em；
}
a{
边框底部：1px实心#fff；
边框底部：1px实心rgba（255、255、255、0.7）；
垫底：0.15em；
位置：相对位置；
颜色：白色；
文字装饰：无；
}
a:以后{
内容：''；
位置：绝对位置；
高度：1px；
左：0；
右：0；
底部：-2px；
背景：rgba（0,0,0,1）；
}
a:悬停{
颜色：#C0E3EC；
}
h1{
保证金：0.667em 0；
左侧填充：0.5em；
文本对齐：左对齐；
}
氢{
字号：1.5em；
}
小的{
边缘顶部：1米；
显示：块；
字体：斜体；
字体大小：0.667em；
}
嗯{
字体样式：无；
}
#欢迎光临{
位置：相对位置；
溢出：隐藏；
垫底：1米；
左侧填充：20px；
}
#欢迎>div{
垫面：1px；
}
#戴夫{
浮动：左；
利润上限：3em
}
#欢迎>h2{
边缘顶部：0.5em；
左侧填充：0.5em；
页边距底部：0；
}
.泡泡{
线高：22px；
}
.泡泡{
背景：rgba（255，255，255，0.1）；
边框颜色：rgba（255、255、255、0.1）；
填料：0.667em 1em；
位置：相对位置；
}
.泡泡：之后{
内容：“；
位置：绝对位置；
宽度：0；
身高：0；
边框顶部：20px实心透明；
边框底部：20px实心透明；
右边框：20px纯白；
边框右颜色：继承；
顶部：50px；
左：-20px；
}
#特征{
利润率：0.444em 0；
明确：两者皆有；
}
#功能>h2{
保证金：0；
}
#特写ol{
位置：相对位置；
填充：1em 0 1.5em；
背景：rgba（0,0,0,1）；
边框颜色：rgba（0,0,0,1）；
保证金：0；
溢出：隐藏；
列表样式：无；
计数器重置：项目；
}
#特点李{
宽度：30%；
填充：0.1.5%；
浮动：左；
文本对齐：居中；
边缘底部：1米；
}
#特征li h2{
显示：块；
填充：1em；
裕度：0.667em自动1em；
字号：1em；
线高：1米；
文本对齐：居中；
背景：rgba（0,0,0,1）；
边界半径：2米；
框阴影：插入0 0 1em rgba（0,0,0,1），0 2px 2px rgba（255,255,255,1）；
}
#下一个>分区{
宽度：45%；
浮动：左；
填充：0.2.5%；
}
img{
z指数：1；
-webkit转换：-webkit转换2易入易出；
-moz转换：-moz转换2s易入易出；
-o-转换：-o-转换2容易输入输出；
-ms转换：-ms转换2容易输入输出；
转换：转换2s易入易出；
位置：相对位置；
}
img：活动{
-webkit变换：旋转（1440度）比例（1.2）；
-莫兹变换：旋转（1440度）比例（1.2）；
-o变换：旋转（1440度）比例（1.2）；
-ms变换：旋转（1440度）比例（1.2）；
变换：旋转（1440度）比例（1.2）；
}
@媒体屏幕和屏幕（最大宽度：1200px）{
.包装纸{
宽度：80%；
}
}
@媒体屏幕和屏幕（最大宽度：768px）{
.包装纸{
宽度：自动；
保证金：0；
}
#欢迎光临{
保证金权利：2.5%；
}
}
@媒体屏幕和屏幕（最大宽度：500px）{
.包装纸{
文本对齐：居中；
}
#戴夫{
浮动：无；
}
#欢迎光临{
填充：0.1.5em；
保证金：0；
}
h1{
文本对齐：居中；
页边距底部：0；
左侧填充：0；
字号：1.8em；
}
#欢迎>h2{
边缘底部：0.667em；
}
.泡泡{
文本对齐：居中；
}
.泡泡：之后{
显示：无；
}
#特点李{
宽度：47%；
}
#小李：最后一个孩子{
浮动：无；
明确：两者皆有；
保证金：0自动；
}
#下一个>分区{
无浮动；
宽度：自动；
}
}
我将创建一个函数，该函数将勾选一个全局变量，并在提交时检查它

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

只需替换如下所示的onclick方法，它就会工作

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

如果您使用的是UI引导，我建议您使用。一旦包含模块依赖项，就可以这样确认它

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
    });
  }
}

有关更多详细信息，请参阅。
这有点晚了，但对于未来的读者，如15分钟前的我：

“角度方式””将创建一个指令，如下所示：


用法：

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

保存
它可能对其他人有所帮助

HTML代码示例

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

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)
                      }
                  });
              }
          };
      }
]);

当您单击取消时，您正在取消单击事件，但您没有取消
ng click
（不管是什么，我对angularjs不熟悉）
<button ng-click="save()" confirm="Save Changes?">Save</button>

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

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)
                      }
                  });
              }
          };
      }
]);