Fullcalendar 不使用角度代码答案

【问题标题】：Full Calender not working with angular codeFullcalendar 不使用角度代码
【发布时间】：2014-08-15 14:46:27
【问题描述】：

我在我的项目中使用 ashraw 的 fullcalendar 作为事件调度程序，为了显示事件，我必须在 jquery 中编写如下代码：

$(document).ready(function() {    
  $('#calendar').fullCalendar({
   defaultDate: '2014-06-12',
   //editable: true,
   events: [{
     title: 'All Day Event',
     start: '2014-06-01'
    }
]});

如果我将它附加到一个包含所有客户端依赖项的简单 html 页面上，上面的内容就可以正常工作。

但如果我想在 AngularJs 中使用相同的代码。然后上面的好像不行……不知道是什么问题，怎么解决……

这里我的事件将从 node.js 的 rest 服务绑定：

    MyFirstMeanApp.controller('LeaveController', ['$scope', '$http', '$cookieStore', 
                function ($scope, $http, $cookieStore) {

        var Events = [];

        $http({
           method: 'POST',
           async: false,
           url: 'http://localhost:3000/GetDataForEvents',
           data: {
            userID: $cookieStore.get('credentials')._id
           }
        })
        .success(function (data, status, headers, config) {
              Events = JSON.stringify(data);                  
               $('#calendar').fullCalendar({
                    dayClick: function (date) {
                        if (date < new Date()) {
                           alert("You can't set an event in past date..");
                        }
                        else {
                            $scope.$apply();
                            $('#test_modal').modal('show');
                        }
                    },
                    defaultDate: new Date(),
                    events:  Events 
              });
            })
         .error(function (data, status, headers, config) {
               alert("error");
        })
  }]);

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope angularjs-ng-repeat angular-ui

【解决方案1】：

尝试用 $timeout 包装你的 jquery 插件：

app.controller('LeaveController', function($scope, $timeout,...) {
    ...
     $timeout(function() {
        $('#calendar').fullCalendar({...});
     });

});

大多数 jQuery 插件都需要准备好 DOM，但在 Angular 中没有准备好 DOM。但是您可以通过在 $timeout 处理程序中执行代码来准备好 DOM。原因是因为 $timeout 回调是在视图渲染完成后执行的（即 $digest 阶段）

【讨论】：