動態更改uib-modal的大小

我想知道最好的方法，如果可能的話，可以隨時更改uibootsrap模態的大小。我已經實現各種各樣的尋呼，其中相同的模式身體內，如果用戶按下模式的頁腳中的「下一步」按鈕，就會在另一個模板加載，就像這樣：動態更改uib-modal的大小

<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中使用缺省值，該缺省值出現在正確的位置（圖中的藍色箭頭），但不在高亮顯示的位置。

仍在尋找輸入 - 謝謝！

來源

2017-03-28 erp

好吧，經過一些比較常規bootstrap（非角度）模式問題後，我發現使用jquery提供了一個簡單的解決方案。可能不是最優化的，但可用於用例。

還要記住，如果你正在尋找一個類似這未必是最好的（如果善於全部）UX，正好契合我與工作的要求。

不管怎麼說，我通過在一個虛擬的類，這是肯定是唯一進入UIB模態的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每次更改頁面並根據頁面將應用寬度。我的需求不是太複雜，所以這可能會更強大，但對於被問到的問題，這是我的解決方案。

來源

2017-03-30 19:07:37 erp

動態更改uib-modal的大小

回答

相關問題