ng-click确认对话框 – AngularJS

我正在尝试使用自定义的angularjs指令在ng-click上设置一个确认对话框：

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

这很好，但不幸的是，使用我的指令标签内的expression式不计算：

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

（名字不评估是这种情况）。 这似乎是由于我的指令的terminal参数。 你有任何解决办法的想法？

testing我的代码： http : //plnkr.co/edit/EHmRpfwsgSfEFVMgRLgj?p=preview

Answer 1

如果你不介意不使用ng-click ，那么它工作正常。 您可以将其重命名为其他内容并仍然读取该属性，同时避免点击处理程序被触发两次。

http://plnkr.co/edit/YWr6o2?p=preview

我认为问题是terminal指示其他指令不运行。 与{{ }}数据绑定只是ng-bind指令的别名，大概是被terminal取消的。

Answer 2

一个干净的指示方法。

更新：旧应答（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> 

 // /app/directives/ng-confirm-click.js Directives.directive('ngConfirmClick', [ function(){ return { priority: -1, restrict: 'A', link: function(scope, element, attrs){ element.bind('click', function(e){ var message = attrs.ngConfirmClick; // confirm() requires jQuery if(message && !confirm(message)){ e.stopImmediatePropagation(); e.preventDefault(); } }); } } } ]); 

代码信贷给扎克雪：http: //zachsnow.com/#!/blog/2013/confirming-ng-click/

更新：新答案（2016）

1）将前缀“ng”更改为“mw”，因为前者（'ng'）保留给原始的angular度指令。

2）修改指令传递函数和消息，而不是拦截ng-click事件。

3）增加了默认的“你确定吗？” 如果自定义消息没有提供给mw-confirm-click-message =“”的消息。

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

 // /app/directives/mw-confirm-click.js "use strict"; var module = angular.module( "myApp" ); module.directive( "mwConfirmClick", [ function( ) { return { priority: -1, restrict: 'A', scope: { confirmFunction: "&mwConfirmClick" }, link: function( scope, element, attrs ){ element.bind( 'click', function( e ){ // message defaults to "Are you sure?" var message = attrs.mwConfirmClickMessage ? attrs.mwConfirmClickMessage : "Are you sure?"; // confirm() requires jQuery if( confirm( message ) ) { scope.confirmFunction(); } }); } } } ]); 

Answer 3

对于我来说， http://www.w3schools.com/js/js_popup.asp ，浏览器的默认确认对话框工作了很多。 刚刚试过这个：

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

简单.. 🙂
但是我认为你不能定制它。 它会显示“取消”或“确定”button。

编辑：

如果使用ionic framework，则需要使用ionicPopup对话框，如下所示：

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

有关更多详细信息，请参阅： $ ionicPopup

Answer 4

它如此简单使用核心的JavaScript +angularjs：

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

如果单击确定，则删除操作将会执行，否则不会。 * id是您要删除的参数，logging。

Answer 5

你不想使用terminal: false因为这是阻止button内部的处理。 相反，在您的link清除attr.ngClick以防止默认行为。

http://plnkr.co/edit/EySy8wpeQ02UHGPBAIvg?p=preview

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

Answer 6

在今天的这个日子，这个解决scheme适用于我：

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

积分： https ： //gist.github.com/asafge/7430497#file-ng-really-js

Answer 7

我为这个依赖于Angular-UI $模式服务的东西创build了一个模块。

https://github.com/Schlogen/angular-confirm

Answer 8

通过使用编译来包装ng-clickexpression式，可以与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}); } }; }; } }; }); 

HTML：

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

Answer 9

  $scope.MyUpdateFunction = function () { var retVal = confirm("Do you want to save changes?"); if (retVal == true) { $http.put('url', myData). success(function (data, status, headers, config) { alert('Saved'); }).error(function (data, status, headers, config) { alert('Error while updating'); }); return true; } else { return false; } } 

代码说明了一切

Answer 10

HTML 5代码示例

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

AngularJs自定义指令代码示例

 var app = angular.module('mobileApp', ['ngGrid']); app.directive('confirmationNeeded', function () { return { link: function (scope, element, attr) { var msg = attr.confirmationNeeded || "Are you sure?"; var clickAction = attr.ngClick; element.bind('click',function (e) { scope.$eval(clickAction) if window.confirm(msg) e.stopImmediatePropagation(); e.preventDefault(); }); } }; }); 

Answer 11

我希望AngularJS有一个内置的确认对话框。 通常，使用自定义的对话框比使用内置的浏览器更好。

我简单地使用了twitter bootstrap，直到它停止使用版本6.我四处寻找替代品，但我发现的是复杂的。 我决定尝试一下JQuery UI。

这是我打算从ng-grid中删除某些东西时所调用的示例;

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

我希望这可以帮助别人。 当我需要升级ui-bootstrap-tpls.js时，我拉着头发，但是打破了我现有的对话框。 我今天早上上class，尝试了几件事，然后意识到我过于复杂了。

Answer 12

如果你使用ui-router，取消或接受button取代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; }); } }; }); 

Answer 13

非常简单的angular度解决scheme

您可以使用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> 

Answer 14

这里是一个干净而简单的解决scheme，使用angular度许诺$q ， $window和native .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箭头函数，但它也在普通的ES5中工作。

Answer 15

在angularjs中使用bootstrap删除确认popup窗口

非常简单..我有一个解决scheme，这与使用引导构造popup。 我在这里提供

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

在引导模型popup：

 <div class="modal-footer"> <a href="" data-dismiss="modal" ng-click="deleteData()">Yes</a> <a href="" data-dismiss="modal">No</a> </div> 

JS

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

当我点击删除button引导删除确认popup窗口将打开，当我点击是button行将被删除。

Answer 16

确认对话框可以使用AngularJS实现材质 ：

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

实现示例： Angular Material – 对话框