javascript - 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 类来在 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);
};