angular 确认，confirmIf 调整

Question

我制作了一个带有按钮列表的界面。 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 次后变得无聊。

问题：

有没有办法在确认模式中显示一个 "ok i understand, stop showing confirm" 按钮，而在其他按钮上单击确认将不会显示。

现代网络浏览器处理弹出窗口的方式与此相同。

谢谢

Answer 1

您可以覆盖 $confirmModalDefaults（以更改确认模板和控制器）并使用 confirm-if。

或者您可以编写自己的确认 - https://github.com/Schlogen/angular-confirm/blob/master/angular-confirm.js 只是 ~100 行。

Answer 2

angular-confirm 已经包含显示或隐藏确认消息的属性。

<button type="button" ng-click="delete()" confirm-if="checked" confirm="Are you sure, {{name}}?">Delete</button>

我对插件做了一些修改，在 "last time the confirm will show"

上添加了一条消息

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) 为新模板创建一个htmlconfirm.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);
                            }

                        });

                    });

                }
            }
        });
}));

angular 确认，confirmIf 调整

angular confirm, confirmIf tweaking

confirm

angularjs