Javascript ng点击确认对话框-AngularJS

我正在尝试使用自定义angularjs指令在

ng单击上设置确认对话框：

app.directive('ngConfirmClick', [
    function(){
        return {
            priority: 1,
            terminal: true,
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.ngClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

这非常有效，但不幸的是，使用my指令的标记内的表达式不会被计算：

<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>

向{{name}问好

（本例中不计算名称）。这似乎是由于我的指令的终端参数。你对解决办法有什么想法吗

要测试我的代码：
如果您不介意不使用
ng单击
，它可以正常工作。您可以将其重命名为其他名称并仍然读取该属性，同时避免当前存在的两次触发单击处理程序的问题


我认为问题在于
terminal
指示其他指令不要运行。与
{{}
的数据绑定只是
ng bind
指令的别名，该指令可能被
终端
取消
 我希望AngularJS有一个内置的确认对话框。通常，定制对话框比使用内置浏览器对话框更好

我曾短暂地使用twitter引导，直到第6版停止使用。我四处寻找替代方案，但我发现的方案很复杂。我决定试试jQueryUI

这是我的示例，当我将要从ng网格中删除某些内容时，我会调用它

    // Define the Dialog and its properties.
    $("<div>Are you sure?</div>").dialog({
        resizable: false,
        modal: true,
        title: "Modal",
        height: 150,
        width: 400,
        buttons: {
            "Yes": function () {
                $(this).dialog('close');
                //proceed with delete...
                /*commented out but left in to show how I am using it in angular
                var index = $scope.myData.indexOf(row.entity);

                $http['delete']('/EPContacts.svc/json/' + $scope.myData[row.rowIndex].RecordID).success(function () { console.log("groovy baby"); });

                $scope.gridOptions.selectItem(index, false);
                $scope.myData.splice(index, 1);
                */
            },
            "No": function () {
                $(this).dialog('close');
                return;
            }
        }
    });

//定义对话框及其属性。
$（“你确定吗？”）。对话框({
可调整大小：false，
莫代尔：是的，
标题：“模态”，
身高：150，
宽度：400，
按钮：{
“是”：函数（）{
$（this.dialog（'close'）；
//继续删除。。。
/*注释掉了，但留下来展示我是如何在angular中使用它的
var index=$scope.myData.indexOf（row.entity）；
$http['delete']（'/EPContacts.svc/json/'+$scope.myData[row.rowIndex.RecordID]）成功（函数（）{console.log（“groovy baby”）；}）；
$scope.gridOptions.selectItem（index，false）；
$scope.myData.splice（索引，1）；
*/
},
“否”：函数（）{
$（this.dialog（'close'）；
返回；
}
}
});

我希望这对某人有帮助。当我需要升级ui-bootstrap-tpls.js时，我非常紧张，但它破坏了我现有的对话框。今天早上我开始工作，尝试了一些东西，然后意识到我太复杂了。
你不想使用
终端：false
，因为这就是阻止按钮内部处理的原因。相反，在
链接中
清除
attr.ngClick
以防止默认行为


代码说明了一切
一种干净的指令方法。
更新：旧答案（2014）

它基本上拦截
ng click
事件，显示
ng confirm click=“message”
指令中包含的消息，并要求用户确认。如果单击确认，则执行正常的
ng click
，如果未执行，脚本将终止，并且
ng click
不会运行

<!-- index.html -->
<button ng-click="publish()" ng-confirm-click="You are about to overwrite your PUBLISHED content!! Are you SURE you want to publish?">
  Publish
</button>

代码归功于扎克·斯诺：

更新：新答案（2016）

1） 将前缀从'ng'更改为'mw'，因为前者（'ng'）保留用于本机角度指令

2） 修改指令以传递函数和消息，而不是拦截单击事件

3） 如果未向mw confirm click message“”提供自定义消息，则添加了默认的“确定吗？”消息

在今天，此解决方案对我有效：

/**
 * A generic confirmation for risky actions.
 * Usage: Add attributes: ng-really-message="Are you sure"? ng-really-click="takeAction()" function
 */
angular.module('app').directive('ngReallyClick', [function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                var message = attrs.ngReallyMessage;
                if (message && confirm(message)) {
                    scope.$apply(attrs.ngReallyClick);
                }
            });
        }
    }
}]);

信用证：
对我来说，浏览器的默认确认对话框非常有效。刚刚试过这个：

$scope.delete = function() {
    if (confirm("sure to delete")) {
        // todo code for deletion
    }
};

简单…）

但我认为你不能定制它。它将显示“取消”或“确定”按钮

编辑：

.directive('confirmClick', function ($window) {
  var i = 0;
  return {
    restrict: 'A',
    priority:  1,
    compile: function (tElem, tAttrs) {
      var fn = '$$confirmClick' + i++,
          _ngClick = tAttrs.ngClick;
      tAttrs.ngClick = fn + '($event)';

      return function (scope, elem, attrs) {
        var confirmMsg = attrs.confirmClick || 'Are you sure?';

        scope[fn] = function (event) {
          if($window.confirm(confirmMsg)) {
            scope.$eval(_ngClick, {$event: event});
          }
        };
      };
    }
  };
});

<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>

如果您使用的是ionic framework，则需要使用ionic弹出对话框，如所示：

// A confirm dialog


$scope.showConfirm = function() {
   var confirmPopup = $ionicPopup.confirm({
     title: 'Delete',
     template: 'Are you sure you want to delete this item?'
   });

   confirmPopup.then(function(res) {
     if(res) {
       // Code to be executed on pressing ok or positive response
       // Something like remove item from list
     } else {
       // Code to be executed on pressing cancel or negative response
     }
   });
 };

有关更多详细信息，请参阅：
我为此创建了一个模块，它依赖于Angular UI$modal服务

HTML 5代码示例

<button href="#" ng-click="shoutOut()" confirmation-needed="Do you really want to
shout?">Click!</button>

使用核心javascript+angular js非常简单：

$scope.delete = function(id) 
    { 
       if (confirm("Are you sure?"))
           {
                //do your process of delete using angular js.
           }
   }

如果单击“确定”，则将执行删除操作，否则不会执行。
*id是要删除的参数记录。
如果使用ui路由器，则“取消”或“接受”按钮将替换url。为了防止出现这种情况，在条件句的每种情况下都可以返回false，如下所示：

app.directive('confirmationNeeded', function () {
  return {
    link: function (scope, element, attr) {
      var msg = attr.confirmationNeeded || "Are you sure?";
      var clickAction = attr.confirmedClick;
      element.bind('click',function (event) {
      if ( window.confirm(msg) )
        scope.$eval(clickAction);
      return false;
    });
  }
}; });

通过使用compile包装
ng click
表达式，可以使用与
ng click
一起工作的仅角度解决方案

指令：

.directive('confirmClick', function ($window) {
  var i = 0;
  return {
    restrict: 'A',
    priority:  1,
    compile: function (tElem, tAttrs) {
      var fn = '$$confirmClick' + i++,
          _ngClick = tAttrs.ngClick;
      tAttrs.ngClick = fn + '($event)';

      return function (scope, elem, attrs) {
        var confirmMsg = attrs.confirmClick || 'Are you sure?';

        scope[fn] = function (event) {
          if($window.confirm(confirmMsg)) {
            scope.$eval(_ngClick, {$event: event});
          }
        };
      };
    }
  };
});

<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>

HTML:

.directive('confirmClick', function ($window) {
  var i = 0;
  return {
    restrict: 'A',
    priority:  1,
    compile: function (tElem, tAttrs) {
      var fn = '$$confirmClick' + i++,
          _ngClick = tAttrs.ngClick;
      tAttrs.ngClick = fn + '($event)';

      return function (scope, elem, attrs) {
        var confirmMsg = attrs.confirmClick || 'Are you sure?';

        scope[fn] = function (event) {
          if($window.confirm(confirmMsg)) {
            scope.$eval(_ngClick, {$event: event});
          }
        };
      };
    }
  };
});

<a ng-click="doSomething()" confirm-click="Are you sure you wish to proceed?"></a>


非常简单的角度解
您可以将id与消息一起使用，也可以不与消息一起使用。如果没有消息，将显示默认消息

指令

app.directive('ngConfirmMessage', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.on('click', function (e) {
                var message = attrs.ngConfirmMessage || "Are you sure ?";
                if (!confirm(message)) {
                    e.stopImmediatePropagation();
                }
            });
        }
    }
}]);

控制器

$scope.sayHello = function(){
    alert("hello")
}

HTML

留言

<span ng-click="sayHello()" ng-confirm-message="Do you want to say Hello ?" >Say Hello!</span>

打招呼！

没有消息

<span ng-click="sayHello()" ng-confirm-message>Say Hello!</span>

打招呼！
这是一个干净简单的解决方案，使用了
$q
、
$window
和本机
。confirm（）
模式：

angular.module('myApp',[])
  .controller('classicController', ( $q, $window ) => {
    this.deleteStuff = ( id ) => {
      $q.when($window.confirm('Are you sure ?'))
        .then(( confirm ) => {
          if ( confirm ) {
            // delete stuff
          }
        });
    };
  });

这里我使用的是
controllerAs
语法和ES6箭头函数，但它也在普通的ol'ES5中工作。
使用angularjs中的引导删除确认弹出窗口
很简单。。我有一个解决方案，使用引导确认弹出窗口。
我在这里被提供

<button ng-click="deletepopup($index)">Delete</button>

当我单击“删除”按钮时，引导删除确认弹出窗口将打开，当我单击“是”按钮时，行将被删除
 确认对话框可通过以下方式实现：

$mdDialog在应用程序上打开一个对话框，通知用户有关关键问题的信息
信息或要求他们做出决定。有两个
设置方法：简单的promise API和常规对象语法

实施示例：


在html文件中调用delete_plot（）函数

在这种情况下，为什么要使用终端？是的
<div class="modal-footer">
  <a href="" data-dismiss="modal" ng-click="deleteData()">Yes</a>
  <a href="" data-dismiss="modal">No</a>
</div>

var index=0;
$scope.deleteData=function(){
    $scope.model.contacts.splice(index,1);
}
// delete a row 
$scope.deletepopup = function ($index) {
    index=$index;
    $('#myModal').modal('show');
};

<i class="fa fa-trash delete-plot" ng-click="delete_plot()"></i> 
 
  

    $scope.delete_plot = function(){
        check = confirm("Are you sure to delete this plot?")
        if(check){
            console.log("yes, OK pressed")
        }else{
            console.log("No, cancel pressed")

        }
    }