Угловой пользовательский интерфейс Bootsrap modal callback

Question

У меня есть мода, которая имеет одну кнопку ok и отменяет связь. Мне нужна помощь, мне нужен другой экземпляр ok и отмените для каждого модального экземпляра, который вызывается.

Modal.html

<div ng-controller="dealerController">  
<div class="modelstitle"> 
    <div class="modal-header mdlheader"> 
     <button type="button" class="close close-btn" ng-click="cancel()">&times;</button> 
     <h3 class="modal-title mdltitle" ng-model="modalTitle">{{modalTitle}}</h3> 
    </div> 
    <div class="modal-body mdlbody"> 
     <p ng-model="modalContent">{{modalContent}}</p><br/> 
    </div> 
    <div class="modal-footer footerbtn"> 
     <button class="btn btn-primary btnwarning" type="button" ng-click="cancel()">Cancel</button> 
     <button class="btn btn-primary btnwarning" type="button" ng-click="ok()">OK</button> 
    </div> 
</div> 

Контроллер

var myApp=angular.module('home', ['ui.bootstrap']); 

myApp.controller('ModalController',function($scope,$uibModal){ 


$scope.showModal = function(){ 
     $scope.modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: 'modal.html', 
      //controller: 'ModalController', 
      size: 'sm', 
      scope: $scope, 
      // Prevent closing by clicking outside or escape button. 
      backdrop: 'static', 
      keyboard: false 
     }); 
} 

$scope.ok = function(){ 
    $scope.modalInstance.dismiss(); 
} 

$scope.cancel = function() { 
     //alert("Cancel from main controller"); 
     $scope.modalInstance.dismiss('cancel'); 
}; 
}) 

Plunker

Ожидаемое: Мне нужно другое ok и отменить реализацию для каждого экземпляра модального.

Answer 1

Вы можете попробовать добавить дополнительный параметр для вас, модальный экземпляр, который будет идентифицировать ваш фактический открытый модальный. Затем в ok и отменить функцию do if statement.

var myApp=angular.module('home', ['ui.bootstrap']); 

     myApp.controller('ModalController',function($scope,$uibModal){ 


     $scope.showModal = function(modalId){ 
       $scope.modalInstance = $uibModal.open({ 
        animation: true, 
        templateUrl: 'modal.html', 
        //controller: 'ModalController', 
        size: 'sm', 
        scope: $scope, 
        // Prevent closing by clicking outside or escape button. 
        backdrop: 'static', 
        keyboard: false, 


       }); 
    $scope.modalInstance.modalNameProperty = modalId ; 
     } 

     $scope.ok = function(){ 
    if($scope.modalInstance.modalNameProperty == somename){ 
    //do somethink 
    } 
    else if($scope.modalInstance.modalNameProperty == somename) 
    { 
    // do other staff 
    } 
      $scope.modalInstance.dismiss(); 
     } 

То же самое в функции отмены.

Answer 2

Вы можете сделать свою модную логику открытия более общей и передать ok и cancel функции и использовать их в modal's controller.

<button ng-click="showSomeModal()">Modal 1</button> 
<button ng-click="showOtherModal()">Modal 2</button> 

angular.module('home', ['ui.bootstrap']) 
    .controller('ModalController',function($scope,$uibModal){ 
    function openModal(ok, cancel) { 
     $uibModal.open({ 
     animation: true, 
     templateUrl: 'modal.html', 
     size: 'sm', 
     backdrop: 'static', 
     keyboard: false, 
     controller: function($scope) { 
      $scope.ok = function() { 
      $scope.$close(); 
      ok(); 
      }; 
      $scope.cancel = function() { 
      $scope.$dismiss(); 
      cancel(); 
      }; 
     } 
     }); 
    } 

    angular.extend($scope, { 
     modalTitle: 'I am a Title', 
     modalContent: 'I am model content', 
     showSomeModal: function() { 
     openModal(angular.noop, angular.noop); 
     }, 
     showOtherModal: function() { 
     function ok() { 
      console.log('ok'); 
     } 
     function cancel() { 
      console.log('cancel'); 
     } 
     openModal(ok, cancel); 
     } 
    }); 
}); 

Связанная plunker здесь https://plnkr.co/edit/6ecoHA

---

Или вместо того, чтобы использовать controller, вы можете использовать ту же функцию, после того, как модальный закрыты/распущено, используя модальный result.

function openModal(ok, cancel) { 
    $uibModal.open({ 
    // remove controller altogether 
    ... 
    }) 
    .result 
    .then(ok)  // closed 
    .catch(cancel); // dismissed 
} 

// changes in modal template 
<button type="button" ng-click="$close()">OK</button> 
<button type="button" ng-click="$dismiss()">Cancel</button>