使 Angular UI 日历与 UI-Bootstrap 工具提示一起使用 [英] Getting Angular UI Calendar to work with UI-Bootstrap Tooltips

问题描述

我正在尝试在 angular UI calendarEvent 的鼠标悬停上显示工具提示.我设法按照以下线程中的说明执行此操作，年视图中完整日历的工具提示

 $scope.eventMouseover = function (calEvent, jsEvent) {var tooltip = '<div class="tooltipevent">'+ calEvent.description + '

';$("body").append(tooltip);$(this).mouseover(function (e) {$(this).css('z-index', 10000);$('.tooltipevent').fadeIn('500');$('.tooltipevent').fadeTo('10', 1.9);}).mousemove(函数(e){$('.tooltipevent').css('top', e.pageY + 10);$('.tooltipevent').css('left', e.pageX + 20);});}$scope.eventMouseout = 函数(calEvent，jsEvent){$(this).css('z-index', 8);$('.tooltipevent').remove();},

显然，这不是最好的方法.使用最新的 UI-Bootstrap，我们有一个更好看的工具提示.有没有人成功地将这些工具提示与 Angular-UI 日历集成?

更新 1:如 http://arshaw 中所述.com/fullcalendar/docs/event_rendering/eventRender/ ，我尝试覆盖 eventRender 并简单地将工具提示属性添加到 calendarEvent div.还是行不通.我可以看到，即使是 mouseover 和 mouseout 事件也没有添加到那些包含工具提示"属性的 calendarEvent div 中.

解决方案

如果您将此功能添加到日历配置中，它将起作用.

$scope.eventRender = 函数(事件、元素、视图){$超时(功能(){$(element).attr('tooltip', event.title);$compile(element)($scope);});};

任何东西都可以放在工具提示属性中.甚至 {{bindings}}

$timeout 存在是因为必须调用 $scope.$apply.通过不延迟地使用 $timeout 可以确保在调用摘要时不会抛出正在进行中的摘要"错误.

I am trying to display a tooltip on angular UI calendarEvent's mouse-hover. I managed to do this as explained in the following thread, Tooltip for fullcalendar in year view

    $scope.eventMouseover = function (calEvent, jsEvent) {
        var tooltip = '<div class="tooltipevent">' + calEvent.description + '</div>';
        $("body").append(tooltip);
        $(this).mouseover(function (e) {
            $(this).css('z-index', 10000);
            $('.tooltipevent').fadeIn('500');
            $('.tooltipevent').fadeTo('10', 1.9);
        }).mousemove(function (e) {
            $('.tooltipevent').css('top', e.pageY + 10);
            $('.tooltipevent').css('left', e.pageX + 20);
        });
    }

    $scope.eventMouseout = function (calEvent, jsEvent) {
        $(this).css('z-index', 8);
        $('.tooltipevent').remove();
    },

Obviously, this is not the best way to do this. With the latest UI-Bootstrap, we have a much nicer looking tooltips. Did anyone successfully integrated these tooltips with the Angular-UI Calendar?

Update 1 : As explained in http://arshaw.com/fullcalendar/docs/event_rendering/eventRender/ , I tried overriding the eventRender and simply added the tool tip attribute to the calendarEvent divs. Still not working. I can see that even the mouseover and mouseout events are not added to the those calendarEvent divs that contain 'tooltip' attribute.

解决方案

if you add this function to the calendar config it will work.

$scope.eventRender = function( event, element, view ) { 
  $timeout(function(){
    $(element).attr('tooltip', event.title);
    $compile(element)($scope);
  });
};

Anything can be placed in the tooltip attribute. even {{bindings}}

The $timeout is there because $scope.$apply must be called. By using $timeout with no delay it is ensured that a digest will be called without ever throwing a "digest in progress" error.

这篇关于使 Angular UI 日历与 UI-Bootstrap 工具提示一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！