ui 日历事件不起作用

Question

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

我关注了this 和this。但不知何故，以下事件不起作用：

dayClick
eventDrop
eventResize

任何想法可能是什么原因？我只是复制粘贴了整个代码，所以没有出错的机会。我已经验证它无法正常工作 ny 放置一些控制台消息只是为了查看事件是否被触发。但是在控制台上点击事件时没有打印任何消息。

谢谢

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

     /* 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

其他事件是否有效？ first link 中的代码不完整。 我创建了一个plunker where you can reproduce a basic example from the second link。 基本上，你可以做的是：

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

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

b) 引用该函数：

$scope.uiConfig = {
    eventDrop: $scope.alertOnDrop, 
    (...)
};

$scope.alertOnDrop = function(){
    alert("event drop");
}

我创建了一个 new plnkr 来复制您的 sn-p。只需在 Config 中引用它们之前定义你的函数，它就会起作用。

关于工具提示

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

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

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