Angularjs

Question

我对 angularjs 还是很陌生，目前正在将现有的 spa javascript 应用程序移植到 angularjs 框架。我正在使用 ui-bootstrap 指令来创建 bootstrap 模态。一旦模态显示在屏幕上，我试图将模态重新定位在屏幕中间。使用 jQuery 这是一项简单的任务，只需在调用后获取模态元素：

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

但我似乎无法找到使用 angular 执行此操作的正确方法。我的第一个想法是捕捉 bootstrap 事件。但事实证明这些并没有被解雇 Here 和 Here

我尝试创建自定义指令，但在 link 函数中定义了元素，但在屏幕上还不可见。一旦模态可见，我需要一种方法来触发一些调整大小的代码。

我也尝试访问 $modalStack.getTop()，但我最终遇到了同样的问题。无法知道 $modalStack.getTop().value.modalDomEl 何时真正解析并显示在屏幕上。

我也尝试了以下方法，但打开的承诺在模态实际显示在屏幕上之前就已解决。

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

如何使用 angular 完成此操作？

Answer 1

您应该使用 CSS 将模式定位为第一个选项。这避免了有关特定元素何时被渲染的所有问题，并与 Angular 使用数据绑定而不是手动 DOM 操作来构建您的 UI 的精神保持一致。

在 Angular 世界中，您不会找到很多可以给您带来 "element rendered" 事件或类似事件的东西。这不是推荐的做事方式。

如果你绝对不能使用 CSS，那么在打开的承诺中使用 $timeout，并在执行你的重新定位逻辑之前等待一小段时间（50 毫秒可能没问题）。

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

Answer 2

所以我最终采用了@user2943490 推荐的内容并针对我的用例进行了一些调整。

我创建了一个添加到模态模板的指令。在内部，我每 100 毫秒检查一次模态内容 class 是否存在。如果 class 存在，我们知道模态已被添加到 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 3

您应该使用 modal.rendered 而不是 modal.opened。不需要 link 函数或间隔检查或其他任何东西。

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

Angularjs - 显示模态后调整 bootstrap 模态

Angularjs - Resize bootstrap modal after modal is shown

javascript

angular-ui-bootstrap