AngularStrap $ popover無法與UI日曆（Fullcalendar的包裝）

Question

我有一個關於如何在Fullcalendar中使用AngularStrap的popover的問題。 我有這個：

angular.module('calendarModule', [ 
     'ui.calendar', 
     'ui.bootstrap', 
     'mgcrea.ngStrap']) 
    .controller('CalendarCtrl', function($scope,$compile,$popover,uiCalendarConfig) 

作爲模塊聲明，我將使用彈出窗口。

當我嘗試使用類似的這裏aswered：Using $popover service in Angular with Fullcalendar

我有控制檯錯誤：

"Error: $popover is not a function 

嘆息，方法，另外，當添加BS-酥料餅的指令一樣顯示在問題我參考，我們下一個錯誤：

"Error: [$compile:multidir] Multiple directives [bsPopover, uiCalendar] asking for new/isolated scope on: <div class="ng-pristine ng-untouched ng-valid" bs-popover="" ng-model="eventSources" calendar="myCalendar" ui-calendar="uiConfig.calendar"> 

加載序列：

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>      <!-- jQuery --> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>      <!-- jQuery UI --> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.min.js"></script> 
     <script src="//cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.2/angular-strap.tpl.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>      <!-- Angular routing --> 
     <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>        <!-- Bootstrap UI --> 



     <!-- Load JS from local --> 

     <script src="js/vendor/bootstrap.min.js"></script>                <!-- bootstrap --> 

     <script src='js/vendor/fullcalendar/lib/moment.min.js'></script>            <!-- calendar moment --> 
     <!--script src='js/vendor/fullcalendar/lib/jquery.min.js'></script>            <!- - jquery --> 
     <script src='js/vendor/fullcalendar/fullcalendar.js'></script>             <!-- fullcalendar --> 
     <script src='js/vendor/fullcalendar/lang/es.js'></script>              <!-- fullcalendar esp--> 

就像虛擬警察：有人幫助我:(

Answer 1

你當在CalendarCtrl注入$酥料餅的服務，這很好。

但是你添加$ popover作爲參數，這是錯誤的。

默認情況下，懸停事件處理程序中只有三個參數。 （1）事件 （2）jQueryEvent （3）查看。

所以$ popover在你的功能級別是未定義的。這就是它造成問題的原因。

更改事件懸停功能如下：

$scope.alertOnEventHover = function(event, jsEvent, view){ 
    var myPopover = $popover(angular.element(jsEvent.target), { 
     title: 'My Title', 
     content:'My Content', 
     show: true, 
     trigger: 'hover', 
     autoClose: true 
    }); 
}; 

你的第二個解決方案是行不通的，因爲你要創建單指令兩個孤立的範圍。這是不允許的角度。

希望這會有所幫助:)

Answer 2

你必須從fullcalendar事件中捎帶回來。對於恩，我用「選擇」和「eventClick」，像這樣：

 //clicking the day(empty spot) in the calendar 
     select: function(start, end, allDay, el, view) { 
      var element = $(el.target); 
      popover = $popover(element, _.extend({ 
       container: element.parent(), 
       html: true, 
       template: 'directives/assignment-popover/add-assignment.tpl.html', 
       animation: 'am-fade-and-slide-top', 
       customClass: 'popover add blue', 
       autoClose: 'true' 
      })); 
      popover.$scope.assignment = {}; 
      popover.$scope.assignment.due = start; 
      popover.$promise.then(popover.show); 
     }, 

而當你想將數據傳遞到酥料餅範圍：

 //clicking on an event 
     eventclick: function(event, el, view){ 
      var element = $(el.target).closest('.fc-event'); 
      popover = $popover(element, _.extend({ 
       container: element.parent(), 
       html: true, 
       template: 'partials/add-assignment.tpl.html', 
       animation: 'am-fade-and-slide-top', 
       customClass: 'popover add blue', 
       autoClose: 'true' 
      })); 

      //here is the magic .... 
      popover.$scope.assignment = event; 
      popover.$promise.then(popover.show); 
     }