Question

我在项目中使用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的休息服务绑定：

    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");
        })
  }]);

Answer 1

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

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

});

大多数jQuery插件都需要准备好DOM，但在Angular中没有DOM就绪。但是你可以通过在$ timeout处理程序中执行代码来获得等效的DOM。原因是因为$ timeout回调是在呈现视图后执行的（即$ digest阶段）

Fullcalendar不使用角度代码

1 个答案: