我使用角度和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行。
角度確認已包含一個屬性顯示或隱藏確認信息。
<button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>
我做了該插件的一些修改上添加一條消息「最後一次確認將顯示」
1）在HTML中confirm-last attribut將呈現顯示在確認模式上的警告文本：
<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）的默認PARAM創建HTML新模板confirm.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);
}
});
});
}
}
});
}));
謝謝，我會試試這個 – AlainIb
我應該學會閱讀...指令已經包含一個參數（'confirm-if'）來顯示或不顯示確認：''。 – AlainIb