Question

我有一个关于如何使用Fullcalendar使用AngularStrap的popover的问题。我有这个：

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

作为模块声明，我将使用popover。

当我尝试使用这里提到的答案时：Using $popover service in Angular with 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

你必须背负全日历事件。例如，我使用'select'和'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);
        }

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

您的第二个解决方案无效，因为您尝试在单个指令上创建两个隔离的范围。角度不允许。

希望这会有所帮助：）

AngularStrap $ popover无法使用ui calendar（Fullcalendar的包装器）

2 个答案: