我使用角度和angular-confirm
我制作了一个带有按钮列表的界面。 http://awesomescreenshot.com/0465v52t3e
在每个按钮上都有一个这样的确认：
<button ng-click="..." class="btn btn-lg btn-invisible" type="button"
confirm="{{'Realy want to add it ?'|translate}}" >
<span aria-hidden="false" class="glyphicon glyphicon-unchecked"></span>
</button>
列表中有很多按钮，所以如果用户需要点击其中的 10 个，确认消息会在 2/3 次后变得乏味。
问题：
有没有办法在确认模式中显示一个“好的，我明白了，停止显示确认”按钮，而在其他按钮上单击确认将不会显示。
现代网络浏览器如何处理弹出窗口的想法是相同的。
谢谢
【问题讨论】：
您可以覆盖$confirmModalDefaults（更改确认模板和控制器）并使用confirm-if。
或者您可以编写自己的确认 - https://github.com/Schlogen/angular-confirm/blob/master/angular-confirm.js 只是 ~100 行。
【讨论】：
confirm-if）来显示或不显示确认：<button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>。
angular-confirm 已经包含一个属性来显示或隐藏确认消息。
<button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>
我对插件做了一些修改，添加了一条关于“最后一次确认将显示”的消息
1) 在 HTML 中，confirm-last 属性将在确认模式上显示警告文本：
<button class="btn btn-lg btn-invisible" type="button" ng-click="add(id)"
confirm="add"
confirm-if="showconfirm.add<=showconfirm.max"
confirm-last="showconfirm.add==showconfirm.max" >
Add
</button>
<button class="btn btn-lg btn-invisible" type="button" ng-click="edit(id)"
confirm="edit"
confirm-if="showconfirm.edit<=showconfirm.max"
confirm-last="showconfirm.edit==showconfirm.max" >
Add
</button>
<button class="btn btn-lg btn-invisible" type="button" ng-click="clone(id)"
confirm="clone"
confirm-if="showconfirm.clone<=showconfirm.max"
confirm-last="showconfirm.clone==showconfirm.max" >
Add
</button>
2) 在控制器中
$scope.showconfirm = {
"max" : 2, // how much time the confirm will show for an action
"add" : 0, // how many time it actually show the confirm for this action
"edit" : 0,
"clone": 0
} ;
$scope.add = function(id) {
$scope.showconfirm.add ++;
// ...
}
$scope.edit = function(id) {
$scope.showconfirm.edit ++;
// ...
}
3) 更改模块的默认参数
angular.module('interfaceApp').run(function($confirmModalDefaults) {
$confirmModalDefaults.templateUrl = "partials/elements/confirm.html";
$confirmModalDefaults.defaultLabels.title = 'Confirmez';
$confirmModalDefaults.defaultLabels.ok = 'Oui';
$confirmModalDefaults.defaultLabels.cancel = 'Non';
$confirmModalDefaults.defaultLabels.confirmLastMessage = "(Dernière confirmation pour cette action)";
});
4) 为新模板confirm.html创建一个html
<div class="modal-header"><h3 class="modal-title">{{data.title}}</h3></div>
<div class="modal-body">{{data.text}}</div>
<div class="modal-footer no-topbottom-padding">
<div ng-show="data.confirmLast" style="float:left;padding: 10px;color:#FF0000">
<i>{{data.confirmLastMessage}}</i>
</div>
<div style="float: right;padding: 10px;">
<button class="btn btn-primary" ng-click="ok()">{{data.ok}}</button>
<button class="btn btn-default" ng-click="cancel()">{{data.cancel}}</button>
</div>
</div>
5) 已编辑模块（已编辑部分标有**edited her**）：
/*
* angular-confirm
* https://github.com/Schlogen/angular-confirm
* @version v1.2.4 - 2016-05-11
* @license Apache
*/
(function (root, factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define(['angular'], factory);
} else if (typeof module !== 'undefined' && typeof module.exports === 'object') {
module.exports = factory(require('angular'));
} else {
return factory(root.angular);
}
}(this, function (angular) {
angular.module('angular-confirm', ['ui.bootstrap.modal'])
.controller('ConfirmModalController', function ($scope, $uibModalInstance, data) {
$scope.data = angular.copy(data);
$scope.ok = function (closeMessage) {
$uibModalInstance.close(closeMessage);
};
$scope.cancel = function (dismissMessage) {
if (angular.isUndefined(dismissMessage)) {
dismissMessage = 'cancel';
}
$uibModalInstance.dismiss(dismissMessage);
};
})
.value('$confirmModalDefaults', {
template: '<div class="modal-header"><h3 class="modal-title">{{data.title}}</h3></div>' +
'<div class="modal-body">{{data.text}}</div>' +
'<div class="modal-footer">' +
'<button class="btn btn-primary" ng-click="ok()">{{data.ok}}</button>' +
'<button class="btn btn-default" ng-click="cancel()">{{data.cancel}}</button>' +
'</div>',
controller: 'ConfirmModalController',
defaultLabels: {
title: 'Confirm',
ok: 'OK',
cancel: 'Cancel'
}
})
.factory('$confirm', function ($uibModal, $confirmModalDefaults) {
return function (data, settings) {
var defaults = angular.copy($confirmModalDefaults);
settings = angular.extend(defaults, (settings || {}));
data = angular.extend({}, settings.defaultLabels, data || {});
if ('templateUrl' in settings && 'template' in settings) {
delete settings.template;
}
settings.resolve = {
data: function () {
return data;
}
};
return $uibModal.open(settings).result;
};
})
.directive('confirm', function ($confirm, $timeout) {
return {
priority: 1,
restrict: 'A',
scope: {
confirmIf: "=",
confirmLast: "=", // **edited her**
ngClick: '&',
confirm: '@',
confirmSettings: "=",
confirmTitle: '@',
confirmOk: '@',
confirmCancel: '@'
},
link: function (scope, element, attrs) {
function onSuccess() {
var rawEl = element[0];
if (["checkbox", "radio"].indexOf(rawEl.type) != -1) {
var model = element.data('$ngModelController');
if (model) {
model.$setViewValue(!rawEl.checked);
model.$render();
} else {
rawEl.checked = !rawEl.checked;
}
}
scope.ngClick();
}
element.unbind("click").bind("click", function ($event) {
$event.preventDefault();
$timeout(function() {
if (angular.isUndefined(scope.confirmIf) || scope.confirmIf) {
var data = {text: scope.confirm};
// **edited her**
if (scope.confirmLast) {
data.confirmLast = scope.confirmLast;
}
if (scope.confirmTitle) {
data.title = scope.confirmTitle;
}
if (scope.confirmOk) {
data.ok = scope.confirmOk;
}
if (scope.confirmCancel) {
data.cancel = scope.confirmCancel;
}
$confirm(data, scope.confirmSettings || {}).then(onSuccess);
} else {
scope.$apply(onSuccess);
}
});
});
}
}
});
}));
【讨论】：