角度確認、確認したら調整する

Question

角度を使用して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回後に退屈。

QUESTION：

「は[OK]を私は、確認表示を停止理解」のためにと表示されません、他のボタンのクリック確認のボタンをモーダル確認の内側に表示する方法はあります。

現代のWebブラウザがポップアップを処理する方法と同じ考えです。

おかげ

Answer 1

あなたは$confirmModalDefaultsを上書き（確認テンプレートとコントローラを変更する）とconfirm-ifを使用することができます。

ご自身でご記入ください - https://github.com/Schlogen/angular-confirm/blob/master/angular-confirm.jsは100行程度です。

Answer 2

角度確認には確認メッセージを表示するかどうかを示す属性が既に含まれています。

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

---

私はHTMLでconfirm-last attributが表示されます）

1を「確認が表示され、最後の時間」にメッセージを追加するためのプラグインにいくつかの変更を行いました確認のテキストが表示されます。

<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）では、新しいテンプレート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）編集のためのHTMLを作成モジュール

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を変更しますモジュール（編集された部分は**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); 
          } 

         }); 

        }); 

       } 
      } 
     }); 
}));