ui日历事件不工作

Question

我刚刚在我的项目中集成了Angularjs ui-calendar。它似乎起作用了，除了一件事，事件。我试图将我的自定义逻辑放在用户点击事件上，但不知何故，这不起作用。

我遵循这个和这个。但不知何故，以下事件不工作:

dayClick
eventDrop
eventResize

有什么可能的原因吗?我只是复制粘贴了整个代码，所以没有出错的机会。我已经验证了它不工作，我放一些控制台消息只是为了看看事件是否被触发。但是在控制台的事件点击上没有打印消息。

感谢

根据答案，分享我更新的代码:

     /* alert on eventClick */
    $scope.alertOnEventClick = function(date, jsEvent, view) {
      alert(date.title + ' was clicked ');
      console.log(date);
    };
    /* alert on Drop */
    $scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view) {
      alert('Event Droped to make dayDelta ' + delta);
      console.log("date");
    };
    /* alert on Resize */
    $scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view) {
      alert('Event Resized to make dayDelta ' + delta);
      console.log("date");
    };
    /* Change View */
    $scope.changeView = function(view, calendar) {
      uiCalendarConfig.calendars[calendar].fullCalendar('changeView', view);
    };
    /* Render Tooltip */
    $scope.eventRender = function(event, element, view) {
      element.attr({
        'tooltip': event.title,
        'tooltip-append-to-body': true
      });
      $compile(element)($scope);
    };
    $scope.events = [{
      title: 'All Day Event',
      start: new Date(y, m, 1)
    }, {
      title: 'Long Event',
      start: new Date(y, m, d - 5),
      end: new Date(y, m, d - 2)
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d - 3, 16, 0),
      allDay: false
    }, {
      id: 999,
      title: 'Repeating Event',
      start: new Date(y, m, d + 4, 16, 0),
      allDay: false
    }, {
      title: 'Birthday Party',
      start: new Date(y, m, d + 1, 19, 0),
      end: new Date(y, m, d + 1, 22, 30),
      allDay: false
    }, {
      title: 'Click for Google',
      start: new Date(y, m, 28),
      end: new Date(y, m, 29),
      url: 'http://google.com/'
    }];
    $scope.uiConfig = {
      calendar: {
        height: 600,
        editable: true,
        header: {
          left: 'month agendaWeek agendaDay',
          center: 'title',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender
      }
    };
    $scope.eventSources = [$scope.events];

Answer 1

其他事件是否正常工作?第一个链接中的代码不完整。我创建了一个柱塞，你可以从第二个链接复制一个基本的例子。基本上，你能做的是:

a)在定义事件时创建一个函数:

eventResize: function(){
          alert("event resize");
        },

b)引用该函数:

$scope.uiConfig = {
    eventDrop: $scope.alertOnDrop, 
    (...)
};
$scope.alertOnDrop = function(){
    alert("event drop");
}

我已经创建了一个新的plnkr来复制您的代码片段。只要在配置中引用你的函数之前定义它们，它就会起作用。

关于工具提示

我认为很难使用Angular-ui，因为它的所有依赖项通常都过时了。你可以关注它对某些angular版本的特殊依赖。

工具提示也是如此。这个工具提示是由twitter bootstrap.css管理的，但它不能在最新的angular-ui演示代码中开箱即用。与twitter-bootstrap/2.3.1/css/bootstrap.css至少工作正常。

我做了另一个plunker xD，你可以检查工具提示是否正常工作。然后，您应该比较所有依赖项及其版本。我还在angular-ui项目的一个公开问题中评论了这种情况。