Question

我仍然是angularjs的新手，目前正在将一个现有的spa 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推荐的内容并稍微调整了一下我的用例。

我创建了一个我添加到模态模板的指令。在里面我每隔100ms检查一次，看是否存在模态内容类。如果该类存在，我们知道模态已添加到DOM。一旦我执行逻辑，我就取消$ interval check。

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

Angularjs - 显示模态后调整引导模态

3 个答案: