AngularJS-顯示模態后調整引導模態的大小

Question

我對angularjs還是很陌生，目前正在將現有的spa javascript應用程序移植到angularjs框架。 我正在使用ui-bootstrap指令創建引導程序模態。 一旦模態顯示在屏幕上，我試圖將模態重新放置在屏幕中間。 使用jQuery是一項簡單的任務，只需在調用后獲取modal元素即可：

$('#modal').modal('show')

但是我似乎無法找出使用angular進行此操作的正確方法。 我的第一個想法是趕上引導事件。 但是事實證明，那些沒有根據這里和這里解雇

我嘗試創建一個自定義指令，但是在鏈接函數中定義了元素，但在屏幕上尚不可見。 一旦模態可見，我需要一種方法來觸發一些調整大小的代碼。

我也嘗試訪問$modalStack.getTop() ，但最終遇到了同樣的問題。 無法知道何時真正解析$modalStack.getTop().value.modalDomEl並將其顯示在屏幕上。

我也嘗試了以下方法，但是在模式實際顯示在屏幕上之前，已解決了打開的承諾。

modalInstance.opened.then(function(t){
   //$modalStack.getTop()
});

如何使用角度來完成此操作？

Answer 1

因此，我最終接受了@ user2943490的建議，並針對我的用例進行了一些調整。

我創建了一個指令，該指令已添加到“模態模板”中。 在內部，我每隔100毫秒檢查一次，以查看是否存在modal-content類。 如果存在該類，我們知道該模式已被添加到DOM中。 一旦執行了邏輯，就取消了$ interval檢查。

    return {
        link: function(scope, element, attrs){

            var checkInterval = $interval(checkDOM, 100);

            function checkDOM(){
                var $content = element.find('.modal-content');

                if($content.length){
                   //We know if $content.length > 0 Then the modal-content class exists on the screen.
                $interval.cancel(checkInterval);

                }
            }

      element.on('$destroy', function(){
          $interval.cancel(checkInterval);
      });

Answer 2

您應該使用CSS將模態定位為第一個選項。 這樣就避免了呈現特定元素的時間安排上的所有問題，並且與Angular使用數據綁定而不是手動DOM操作來構建UI的精神保持一致。

在Angular世界中，您不會找到很多可以給您帶來“元素渲染”事件或類似事件的東西。 這不是推薦的做事方式。

如果您絕對不能使用CSS，則在打開的Promise中使用$ timeout，然后等待一小段時間（可能需要50ms），然后再執行重新定位邏輯。

modalInstance.opened.then(function(t){
    $timeout(function () {
        // reposition it
    }, 50);
});

Answer 3

您應該使用modal.rendered而不是modal.opened。 無需鏈接功能或間隔檢查或其他任何功能。

modalInstance.rendered.then(function () {
   $('.modal-content').css({ 'width': $(document).width() - 100 + 'px' });     
});