8

I'm trying to show angular-strap popover when hovering on fullcalendar items.

I am using eventMouseover/eventMouseout callbacks to show/hide the popover:

$scope.calendarConfig = {
  defaultView: 'basicWeek',
  eventMouseover: function(event, jsEvent, view) {
    element = $(jsEvent.target).closest('.fc-event');
    popover = $popover(element, {placement: 'bottom', contentTemplate: 'calendar-item-popover.html'});
    popover.$promise.then(popover.show);
  },
  eventMouseout: function() {
    popover.hide();
    popover = null;
  }
};

Then I have a popover body template:

<script type="text/ng-template" id="calendar-item-popover.html">
  <p>Event</p>
  <p>event: {{event | json}}</p>
</script>

My question is how can I pass the 'event' to popover scope?

Here is the plunker: http://plnkr.co/9c6BDWsYuuWAfI4HnJAH

cthulhu
  • 3,602
  • 1
  • 19
  • 25

1 Answers1

9

I have a working solution; popover's scope can be accessed with popover.$scope:

popover.$scope.event = event

Working plunker:

http://plnkr.co/W8n6LxsLCyZFO6ufPHvW

Not sure if that's an optimal solution, so I will wait some time for feedback.

cthulhu
  • 3,602
  • 1
  • 19
  • 25
  • Works for me! I think the only other optimal solution would be for the popover directive to provide a way to "resolve" values (the same way it's done for Angular routes/Angular UI Router states/Angular UI Bootstrap Modal dialogs). So barring that new feature, this seems to be the way to go :) – Sunil D. Jul 09 '14 at 05:14
  • As a side note, while this seems to solve the original problem, when I use the method you've shown above to create the popover I then have problems disposing of the popover and/or trying to make it appear a second time. Depending on what I do, the popover appears and disappears quickly or it launches multiple instances of the popover. – Sunil D. Jul 09 '14 at 17:01
  • Maybe you should make a plunkr and post a new question, I'm eager to take a look at it – cthulhu Jul 09 '14 at 18:13
  • I ended up realizing that I didn't need to pass my data in to the $scope, as the popover's scope was inheriting the data in question (doh!). I tried so many things, I'm not sure where to start w/a plunkr :) But I still appreciate the insight your question/answer provided! – Sunil D. Jul 09 '14 at 19:25
  • You are a genius and a scholar! I was fighting this for days – jakeforaker Dec 06 '14 at 07:26
  • Wow... thanks. Thanks, I have been trying to find a solution for hours !! – JF Beaulieu May 17 '16 at 14:10