Question

我现在正在使用多个模态来引导用户通过单个表单，而且我已经创建了一个指令来打开/关闭每个模态的模态。我做过这样的事情：

.directive('firstModal', function() {                  // Series of directives used to open/close target modals
        return {
            restrict: 'A',
            link: function(scope, element, attr) {
                scope.dismissFirst = function() {
                    element.modal('hide');
                };
                scope.showFirst = function() {
                    element.modal('show');
                };
            }
        };
    }

我已经看了ui.bootstrap和angular-strap，但两者都用于Bootstrap 3.x - 这个站点仍然在Bootstrap 2.3上运行，所以我认为我不会使用任何一个在我们升级网站之前，这两个选项。我的问题是，有没有办法从单个指令处理所有打开/关闭模态？

Answer 1

从dah wahlin查看此链接，其中包含使用0.8.0

的示例下面的

是关于如何使用$ modal

的示例

app.controller('ModalCtrl', function($scope,  $modal) {

      $scope.name = 'theNameHasBeenPassed';

      $scope.showModal = function() {

        $scope.opts = {
        backdrop: true,
        backdropClick: true,
        dialogFade: false,
        keyboard: true,
        templateUrl : 'modalContent.html',
        controller : ModalInstanceCtrl,
        resolve: {} // empty storage
          };


        $scope.opts.resolve.item = function() {
            return angular.copy(
                                {name: $scope.name}
                          ); // pass name to resolve storage
        }

          var modalInstance = $modal.open($scope.opts);

          modalInstance.result.then(function(){
            //on ok button press 
          },function(){
            //on cancel button press
            console.log("Modal Closed");
          });
      };                   
})

var ModalInstanceCtrl = function($scope, $modalInstance, $modal, item) {

     $scope.item = item;

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

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

PLUNKER LINK

我已从this link

复制了此答案

从单个指令打开/关闭多个模态

1 个答案: