Question

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

我已关注this和this。但不知何故，以下事件无效：

dayClick
eventDrop
eventResize

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

由于

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

＆＃13;

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

＆＃13;

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复制你的片段。只需在Config中引用它们之前定义它们，它就可以工作。

关于工具提示

我认为很难使用Angular-ui，因为它的所有依赖都会变得过时。您可以关注open issue关于它对某些角度版本的特殊依赖性。

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

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

ui-calendar活动无效

1 个答案:

关于工具提示