如何向完整日历事件添加角度指令 [英] How to add angular directive to full calendar event

问题描述

我正在使用 Angular-UI 日历(Arshaw 的 fullcalendar 的角度版本)并且在 EventRender 上我想向事件元素添加一个 Angular-UI-bootstrap 弹出窗口.

I'm using Angular-UI Calendar (angular version of Arshaw's fullcalendar) and on EventRender I would like to add a Angular-UI-bootstrap popover to the event element.

我已经尝试过这些(使用咖啡脚本):

I have tried these (using coffeescript):

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")

和

    eventRender: (event, element) ->
        element.find(".fc-event-inner").wrap($compile("<div popover='I appeared on mouse enter!' popover-title='The title.' popover-trigger='mouseenter'></div>")($scope))
        $scope.$apply()

但这两个似乎都没有做任何事情.我想至少第一个的问题是事件是在 angular 已经完成它的魔法之后呈现的.但第二个也没有帮助.使用一些静态元素，popover 可以正常工作.

But neither of those seem to be doing anything. I guess the problem with first one at least is that the event is rendered after angular has done it's magic already. But the second one didn't help either. With some static element the popover is working correctly.

推荐答案

搞定了 :)

eventRender: (event, element) ->
    element.attr('popover', "Finally it's working")
    element.attr('popover-title', 'Hello world')
    element.attr('popover-trigger', 'mouseenter')
    $compile(element)($scope)

这篇关于如何向完整日历事件添加角度指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！