Question

我有一个bootstrap模式，它有一个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和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);
      }
    });
});

此处相关的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>

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

取消功能相同。

Angular UI Bootsrap模态回调

2 个答案: