Question

我想知道最好的方法，如果可能的话，可以动态改变uibootsrap模式的大小。如果用户按下下一个＆＃39;那么我已经在相同的模态体内实现了一种分类的分页。在模态的页脚中按钮，它将加载到另一个模板中，如下所示：

<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

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

还要记住，如果你正在寻找类似的东西，这不一定是最好的（如果好的话）ux，只需符合我正在使用的要求。

无论如何，我传入了一个虚拟类，它肯定是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类，并根据页面应用宽度。我的需求并不太复杂，所以这可能会更加强大，但对于被问到的问题，这是我的解决方案。

动态更改uib-modal大小

1 个答案: