動態更改uib模式大小

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提供了一個簡單的解決方案。 可能不是最優化的，但適用於用例。

另外請記住，如果您正在尋找類似的產品，這不一定是最好的（如果有的話）UX，只適合我正在使用的要求。

無論如何，我傳入了一個虛擬類，該類肯定在uib-modal的windowClass參數中是唯一的-在我的情況下為app-dummy以及我想在其中應用於模式app-modal-window-md modal-的初始類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類，具體取決於頁面將應用寬度。 我的需求不是太復雜，因此它可能更強大，但是對於所要提出的問題，這是我的解決方案。