AngularStrap$popover无法使用UI日历(Fullcalendar的包装器)

Question

我有一个关于如何将AngularStrap的弹出框与Fullcalendar一起使用的问题。我有这个：

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

作为模块声明，我将在其中使用弹出框。

当我尝试使用类似这里的东西时：在 Angular 中使用 $popover 服务与 Fullcalendar

我有控制台错误：

"Error: $popover is not a function

叹息，另外，当添加 BS-popover 指令时，如我引用的问题所示，我有下一个错误：

"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

您必须捎带完整的日历事件。例如，我使用"选择"和"事件点击"，如下所示：

        //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);
        }

Answer 2

你在

CalendarCtrl中注入$popover服务，这很好。

但是您正在添加$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
    });
};

您的第二个解决方案将不起作用，因为您正在尝试在单个指令上创建两个隔离的作用域。不允许在角度中。

希望这对:)有所帮助