动态更改 uib-modal 大小

Question

我想知道最好的方法，如果可能的话，可以即时更改 uibootsrap 模态的大小。我已经在同一个模态主体中实现了某种分页，如果用户在模态的页脚中按下 'next' 按钮，它将加载到另一个模板中，如下所示：

<div id="rule-values-page"
    ng-show="rcw.page ==='Rule Values'">

    <first-template-values ng-show="rcw.provider=== 'First Template'"
        rule-fields="rcw.fields"></first-template-values>

    <second-template-values ng-show="rcw.provider === 'Second Template'"
        rule-fields="rcw.fields"></second-template-values>

    <third-template-values ng-show="rcw.provider=== 'Third Template'"
        rule-fields="rcw.fields"></third-template-values>

</div>

幕后有一些 JavaScript 决定了单击下一个按钮时会发生什么（上面只是它看起来的近似值）。当我启动包含前一页的原始模态时，我使用

var ruleModalTemplate = {
        templateUrl: 'app/indicator/rule-create-wizard.html',
        backdrop: 'static',
        controller: 'ruleCreateWizard',
        controllerAs: 'rcw',
        windowClass: 'app-modal-window',
        resolve: {
          ruleCreateWizardControllerInput: function() {
            return {
              name: vm.name,
              desc: vm.description
            };
          }
        }
      };

这里的关键是 windowClass，因为您可以将大小设置为任何您想要的大小 sm、lg，或者像我一样自定义。现在我遇到的问题是一些后续页面的大小没问题，但其他页面看起来很傻。我希望能够随时控制大小。这会通过对模态主体应用 ng-class 或其他东西来完成吗？感谢任何帮助。

编辑： 所以我走 ng-class 路线，遇到了一些麻烦。我尝试将 ng-class 应用于从上一个指令 'app/indicator/rule-create-wizard.html' 调用的模板，如下所示：

<div id="rule-create-wizard"
    ng-form="ruleFormMaster"
    ng-class="rcw.modalSize()">
    ...
</div>

并在方法 modalSize() 中决定要应用什么 class 方法，看起来像 :

function modalSize() {
  switch (vm.page) {
    case 'Rule Provider Selection':
      return 'app-modal-window-sm';
      break;
    case 'Rule Selection':
      console.debug('in rule selection modal size method');
      return 'app-modal-window-lg';
      break;
  }
}

只是返回 css class 的字符串：

.app-modal-window-lg .modal-dialog {
  width: 65%;
}

.app-modal-window-sm .modal-dialog {
  width: 20%;
}

问题是它没有将它应用于模态，因为模态的指令实际上没有访问（我相信）模态 html 的根实例。见下图：

我正确地（虽然不是我想的那样）将它应用到模板，但不是实际的模态。如果我在调用指令 windowClass: sm 等中使用 uibootstrap 的默认值，它出现在正确的位置（图片中的蓝色箭头）但不在突出显示的位置。

仍在寻找意见 - 谢谢！

Answer 1

好吧，在与一些常规 bootstrap（非 angular）模态问题进行比较后，我发现使用 jquery 提供了一个简单的解决方案。可能不是最优化的，但适用于用例。

另外请记住，如果您正在寻找类似的，这不一定是最好的（如果有的话）用户体验，只是符合我正在使用的要求。

无论如何，我传入了一个虚拟 class，它肯定是唯一的 windowClass 参数的 uib-modal - 在我的例子中 app-dummy 以及我的initial class 其中我想应用到模态 app-modal-window-md:

  var ruleModalTemplate = {
    templateUrl: 'app/indicator/rule-create-wizard.html',
    backdrop: 'static',
    controller: 'ruleCreateWizard',
    controllerAs: 'rcw',
    windowClass: 'app-dummy app-modal-window-md',
    resolve: {
      ruleCreateWizardControllerInput: function() {
        return {
          name: vm.name,
          desc: vm.description
        };
      }
    }
  };

然后我创建了一个 resize() 方法，该方法将在模态内部的页面更改期间被调用：

function resize() {
  switch (vm.page) {
    case 'Rule Provider Selection':
      $('.app-dummy .modal-dialog ')
        .css({
          'width': '30%'
        });
      break;
    case 'Rule Selection':
      var test = $('.app-dummy .modal-dialog ')
        .css({
          'width': '40%'
        });
      break;
    case 'Rule Values':
      $('.app-dummy .modal-dialog')
        .css({ 'width': '70%' })
      break;
  }
}

JQuery 每次在页面更改时都以 app-dummy class 为目标，并根据页面应用宽度。我的需求并不太复杂，所以这可能会更强大，但对于被问到的问题，这是我的解决方案。

动态更改 uib-modal 大小

Change uib-modal size dynamically

javascript

css

angularjs

angular-ui-bootstrap