角度日历指令不在jquery选项卡中呈现

Question

关于角度日历指令的另一个问题。我需要在一个页面上显示多个日历，并使用jquery tabs小部件。但是，只有一个日历可以正确呈现。在普通的jquery fullCalendar中，您可以使用'render'方法确保日历显示何时选中选项卡。但是，这似乎不适用于angular-ui日历指令。

这是一个显示我的意思的傻瓜。删除$（）。tabs（），三个角度日历显示正常。将它们包裹在标签中，它不再有效：

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

关于为什么这不起作用以及如何解决它的任何想法？

谢谢！

PS。我将在Google网上论坛中交叉发布此问题。感谢。

Answer 1

尽管有fullCalendar文档，但“show”似乎不是触发fullcalendar（'render'）的地方。我应该说，至少在使用Angular时不是这样。我不知道在正常的jQuery使用情况下这是否正确。请改为使用“激活”事件：

$("#tabs").tabs({
  activate: function(){
    ("#calendar").fullCalendar('render');
  }
});

http://plnkr.co/edit/HEEX4iqb8kFAsjwdGmkM

Answer 2

渲染时使用超时。

<tab heading="{{tabs[0].title}}" active="tabs[0].active" select="renderCalendar()" disabled="tabs[0].disabled">


     $scope.renderCalendar = function() {
               $timeout(function(){
                    $('.calendar').fullCalendar('render');
                }, 0);
        };