ui-calendar fullcalendar 中每个事件的自定义按钮

Question

当您单击每个按钮时，它只会调用一个模式，以便您可以编辑或删除事件。我在从视图传递事件时遇到问题。

这是在控制器中：

$scope.eventRender = function (event, element, view) {
    element.append(calendarEventService.formatWeekEvent(event));
    $compile(element)($scope);
};

$scope.uiConfig = {
  calendar:{
    ...,
    eventRender: $scope.eventRender
  }
};

这是 eventRender 正在调用的服务：

app.service('calendarEventService', function () {

    this.formatWeekEvent = function (event) {
        return <a whole bunch of html to render the button> +
        '<a ng-click="editActivityModal(event, $event)">Edit</a>' +
        '<a ng-click="deleteActivityModal(event, $event)">Delete</a>'
    };

});

事件本身被传递到服务中，但是当调用 editActivityModal 或 deleteActivityModal 时，事件没有被传递，我只得到未定义的，然而，$event 被传递（这只是为了使用preventDefault 和 stopPropagation 东西）

Answer 1

找到解决方法如下：

在返回的html中添加一个css class在eventRender函数中绑定一个点击事件：

app.service('calendarEventService', function () {

    this.formatWeekEvent = function (event) {
        return <a whole bunch of html to render the button> +
        '<a class="editEvent">Edit</a>' +
        '<a class="deleteEvent">Delete</a>';
    };

});

在eventRender函数中：

$scope.eventRender = function (event, element, view) {
    element.append(calendarEventService.formatWeekEvent(event));
    element.find(".editEvent").bind('click', function () {
        $scope.editEvent(event);
        return false;
    });
    element.find(".deleteEvent").bind('click', function () {
        $scope.deleteEvent(event);
        return false;
    });
    $compile(element)($scope);
};

ui-calendar fullcalendar 中每个事件的自定义按钮

Custom button for each event in ui-calendar fullcalendar

javascript

angularjs

angular-ui

ui-calendar