Angular UI Bootstrap模式回调

Question

我有一个引导程序模态，其中有一个单独的确定和取消按钮。 我需要帮助的是，我需要一个不同的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');
};
})

柱塞

预期的：对于模态的每个实例，我需要一个不同的确定并取消实现。

Answer 1

您可以使模态打开逻辑更通用，并向其传递ok和cancel函数，然后使用模态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);
      }
    });
});

相关的插件在这里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>

Answer 2

您可以尝试向模态实例添加额外的参数，以标识您实际打开的模态。 然后在ok和cancel函数中执行if语句。

    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();
      }

取消功能相同。