Angularjs - Resize bootstrap modal после модального отображения

Question

Я до сих пор довольно новичок в angularjs, и в настоящее время я переношу существующее приложение javascript для курорта в рамки angularjs. Я использую директиву ui-bootstrap для создания загрузочных модалов. Я пытаюсь переместить модальный в середине экрана, как только модаль отображается на экране. С помощью JQuery, который был легкой задачей, просто захватить модальный элемент после вызова:

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

Но я не могу показаться, чтобы выяснить правильный способ сделать это с помощью угловой. Моя первая мысль заключалась в том, чтобы улавливать события бутстрапа. Но оказывается, те, которые не выпустили в соответствии с Here и Here

Я попытался создать пользовательскую директиву, но в функции связи элемент был определен, но не было видно на экране еще. Мне нужно, чтобы вызвать некоторый код изменения размера, когда модальный вид.

Я также попытался получить доступ к $modalStack.getTop(), но в итоге у меня такая же проблема. Невозможно узнать, когда $modalStack.getTop().value.modalDomEl фактически разрешен и отображается на экране.

Я также пробовал следующее, но открытое обещание разрешилось до того, как модальный экран будет отображаться на экране.

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

Как вы это достигаете, используя угловые?

Answer 1

Итак, я решил использовать то, что @ user2943490 рекомендовал и немного изменил его для моего варианта использования.

Я создал директиву, которую я добавил в Модальный шаблон. Внутри я проверяю каждые 100 мс, чтобы увидеть, существует ли класс модального контента. Если класс существует, мы знаем, что модаль добавлен в DOM. Как только я выполню свою логику, я отменяю проверку интервала $.

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, чтобы разместить модальный как первый вариант. Это позволяет избежать всех проблем, связанных со сроками, когда конкретные элементы получают визуализацию и остается в силе с духом Углового использования привязки данных, а не ручной манипуляции с DOM для создания вашего пользовательского интерфейса.

В угловом мире вы не найдете много вещей, которые дадут вам событие с элементом или похожим. Это не лучший способ сделать что-то.

Если вы абсолютно не можете использовать CSS, используйте $ timeout в рамках открытого обещания и подождите короткое время (возможно, 50 мс), прежде чем выполнять логику репозиционирования.

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