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' });     
});