如何使用Angular JS和UI創建確認對話框引導

Question

我試圖讓工作確認模態對話。我有一個調用confirmDelete的NG-點擊指令按鈕（）

HTML

<input type="button" ng-click="confirmDelete(idToDelete)" class="btn">Delete</input> 

ControllerLogic：

$scope.confirmDelete = function (idToDelete) { 
// create a modal dialog with $modal.open from Bootstrap UI 

// if answer in modal dialgue was "yes" call 
// deleteItem(idToDelete); 
// else close modal and do nothing 
} 

$scope.deleteItem = function (idToDelete) { 
//execute deletion 
} 

我無法實現我的嘗試在上面的僞代碼中描述。也許有人可以給我一個提示。

Answer 1

That's的方式予編碼它

組件/ modal.jade

.modal-header 
    button.close(ng-if='modal.dismissable', type='button', ng-click='$dismiss()') × 
    h4.modal-title(ng-if='modal.title', ng-bind='modal.title') 
.modal-body 
    p(ng-if='modal.text', ng-bind='modal.text') 
    div(ng-if='modal.html', ng-bind-html='modal.html') 
.modal-footer 
    button.btn(ng-repeat='button in modal.buttons', ng-class='button.classes', ng-click='button.click($event)', ng-bind='button.text') 

組件/ modal.service.js

'use strict'; 

angular.module('myApp') 
    .factory('Modal', function ($rootScope, $modal) { 
    /** 
    * Opens a modal 
    * @param {Object} scope  - an object to be merged with modal's scope 
    * @param {String} modalClass - (optional) class(es) to be applied to the modal 
    * @return {Object}   - the instance $modal.open() returns 
    */ 
    function openModal(scope, modalClass) { 
     var modalScope = $rootScope.$new(); 
     scope = scope || {}; 
     modalClass = modalClass || 'modal-default'; 

     angular.extend(modalScope, scope); 

     return $modal.open({ 
     templateUrl: 'components/modal/modal.html', 
     windowClass: modalClass, 
     scope: modalScope 
     }); 
    } 

    // Public API here 
    return { 

     /* Confirmation modals */ 
     confirm: { 

     /** 
     * Create a function to open a delete confirmation modal (ex. ng-click='myModalFn(name, arg1, arg2...)') 
     * @param {Function} del - callback, ran when delete is confirmed 
     * @return {Function}  - the function to open the modal (ex. myModalFn) 
     */ 
     remove: function(del) { 
      // console.log('MODAL'); 
      del = del || angular.noop; 

      /** 
      * Open a delete confirmation modal 
      * @param {String} name - name or info to show on modal 
      * @param {All}   - any additional args are passed staight to del callback 
      */ 
      return function() { 
      var args = Array.prototype.slice.call(arguments), 
       name = args.shift(), 
       deleteModal; 

      deleteModal = openModal({ 
       modal: { 
       dismissable: true, 
       title: 'Confirm Delete', 
       html: '<p>'+ $rootScope.translation.modalDelete + ' <strong>' + name + '</strong>?</p>', 
       buttons: [{ 
        classes: 'btn-danger', 
        text: 'Delete', 
        click: function(e) { 
        deleteModal.close(e); 
        } 
       }, { 
        classes: 'btn-default', 
        text: 'Cancel', 
        click: function(e) { 
        deleteModal.dismiss(e); 
        } 
       }] 
       } 
      }, 'modal-danger'); 

      deleteModal.result.then(function(event) { 
       del.apply(event, args); 
      }); 
      }; 
     } 
     } 
    }; 
    }); 

組件/模態.css

.modal-primary .modal-header, 
.modal-info .modal-header, 
.modal-success .modal-header, 
.modal-warning .modal-header, 
.modal-danger .modal-header { 
    color: #fff; 
    border-radius: 5px 5px 0 0; 
} 
.modal-primary .modal-header { 
    background: #428bca; 
} 
.modal-info .modal-header { 
    background: #5bc0de; 
} 
.modal-success .modal-header { 
    background: #5cb85c; 
} 
.modal-warning .modal-header { 
    background: #f0ad4e; 
} 
.modal-danger .modal-header { 
    background: #d9534f; 
} 

Controller.js

angular.module('myApp') 
    .controller('Ctrl', function ($rootScope, Modal) 
    { 
    $scope.confirmDelete = Modal.confirm.remove(function(obj){ 
     yourService.remove(obj); 
    }); 
    }); 

HTML

<input type="button" ng-click="confirmDelete(idToDelete)" class="btn">Delete</input> 

希望它會幫助你的。