动态更改 uib-modal 大小

Question

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

<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() 方法中决定应用哪个类，如下所示：

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类的字符串：

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

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

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

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

仍在寻找意见 - 谢谢！

Answer 1

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

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

无论如何，我传入了一个虚拟类，该类肯定是唯一的到 uib-modal 的 windowClass 参数 - 在我的例子中是 app-dummy 以及我想申请的初始类模态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 类为目标，并根据页面应用宽度。我的需求并不太复杂，所以这可能更强大，但对于提出的问题，这是我的解决方案。