ui-日历工具提示功能不工作

Question

calendar 用于显示日历和事件集（事件目前已硬编码）。但是当我将鼠标悬停在事件上时，工具提示不是 displayed.I 在线搜索了许多答案并且 none为我工作，除了工具提示之外的所有其他内容都是 working.Please help.Following 是我的 js 代码

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function($scope, $http, uiCalendarConfig) {

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            }
        }
    };
    
    
    
    $scope.eventRender = function( event, element, view ) { 
        element.attr({'tooltip': event.title,
                     'tooltip-append-to-body': true});
        $compile(element)($scope);
    };

}]);

如果我尝试以下代码，整个事件 disappears.The 事件将不再显示在日历上

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController', ['$scope', '$http', 'uiCalendarConfig', function($scope, $http, uiCalendarConfig) {

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                }
            },
            eventRender : function( event, element, view ) { 
                element.attr({'tooltip': event.title,
                             'tooltip-append-to-body': true});
                $compile(element)($scope);
            }
        }
    };

}]);

和html代码

<h1> calendar</h1>
            <div ng-controller="myNgController">
               <div class="row">
                  <div class="col-md-8">
                     <div id="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>
                  </div>
                  <div class="col-md-4">
                     <div class="alert alert-success" style="margin-top:50px" ng-controller="MyDbController">
                        <h2 style="margin-top:0px;text-align:center;" ng-repeat="elem in data"> {{elem.balance}}  Available  </h2>
                        <a ui-sref="apply" onclick="closeNav()" class="btn btn-success" role="button" style="display: block; margin: 0 auto;" >Reques(s)</a>
                     </div>
                  </div>
               </div>
            </div>

根据答案更新了代码..

var app = angular.module('myApp', ['ui.calendar', 'ui.router']);
app.controller('myNgController',['$scope', '$timeout', '$http', '$compile', 'uiCalendarConfig', function($scope, $timeout, $http, $compile, uiCalendarConfig){

    $scope.SelectedEvent = null;
    var isFirstTime = true;

    $scope.events = [];
    $scope.eventSources = [$scope.events];
    $scope.events.push({
        title: "event",
        description: "jahsojoaisjjoijaso",
        start: new Date("2017-05-03"),
        end: new Date("2017-05-03"),
        allDay: false,
        stick: false
    });

    $scope.uiConfig = {
        calendar: {
            height: 450,
            editable: false,
            displayEventTime: false,
          
            header: {
                left: 'month basicWeek basicDay agendaWeek agendaDay',
                center: 'title',
                right: 'today prev,next'
            },
            eventClick: function(event) {
                $scope.SelectedEvent = event;
            },
            eventRender : function( event, element, view ) { 
                element.attr({'tooltip': event.title,
                             'tooltip-append-to-body': true});
                $compile(element)($scope);
            },
            eventAfterAllRender: function() {
                if ($scope.events.length > 0 && isFirstTime) {
                    //Focus first event
                 $timeout(function(){
                 uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
                    isFirstTime = false;
                });
                }
            }
           
            
        }
    };

Answer 1

您必须在日历配置定义中设置该函数 (Reference):

$scope.uiConfig = {
    calendar: {
        eventRender: $scope.eventRender,
        ... reset of the configuration
    }
}

不要忘记将 $compile 注入您的控制器：

app.controller('myNgController', ['$scope', '$http', '$compile', 'uiCalendarConfig', function($scope, $http, $compile, uiCalendarConfig) {

至于我们在评论中的讨论 - 您遇到了 "TypeError: Cannot read property 'fullCalendar' of undefined" 错误。尝试以下

注入$timeout到控制器：

app.controller('myNgController', ['$scope', '$timeout', '$http', '$compile', 'uiCalendarConfig', function($scope, $timeout, $http, $compile, uiCalendarConfig) {

并用 $timeout 换行：

uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);

因此最终结果将是：

$timeout(function() {
    uiCalendarConfig.calendars.myCalendar.fullCalendar('gotoDate', $scope.events[0].start);
});

这将确保您仅在视图完成渲染后才调用 fullCalendar。

甜点 - 看看你是如何设置工具提示的：

element.attr({
    'tooltip': event.title,
    'tooltip-append-to-body': true
});

注意它增加了tooltip="<title of event>和tooltip-append-to-body="true，但是为了显示工具提示，你需要设置一个title属性。将其更改为：

element.attr({
    'title': event.title,
    'tooltip-append-to-body': true
});

我猜您认为它是 Bootstrap.UI 工具提示 (http://angular-ui.github.io/bootstrap/#!#tooltip)，因此在这种情况下，您需要进行必要的更改才能正确实施它。但是使用 title 将确保在将鼠标悬停在事件上时浏览器将向您显示默认工具提示（使用本机 HTML "title" 属性）。

ui-日历工具提示功能不工作

ui-calendar tooltip function not working

fullcalendar

angularjs

ui-calendar