2015-04-25 46 views
0

我對Angular非常陌生,我使用Angular UI-Calendar來顯示預訂,這些事件比常規事件稍微更詳細。我可以看到我如何直接在渲染函數中渲染這些事件,但顯然這不是最好的方法,並且確實希望能夠爲事件提供外部渲染器,並且還能夠具有渲染器適合不同類型的日曆視圖。Angular UI-Calendar外部事件渲染器

這是我現在擁有的,並且比最終的更基本。在eventRender部分中,我真的希望能夠調用/包含單獨負責渲染事件的另一個角度html模板。

eventRender : function(event, element) { 
       element.attr({ 
        'tooltip' : event.title, 
        'tooltip-append-to-body' : true 
       }); 
       angular.forEach(event.bookings, function (booking, key){ 
        $(element) 
         .append('<strong>' + booking.title + '</strong>') 
         .append(' x').append(booking.numberCustomers) 
         .append(' &dash; ').append(booking.contact) 
         .append('<br />'); 
       }); 

      } 

回答

0

按照UI日曆文檔eventRender方法:

函數也可以返回將用於 渲染,而不是一個全新的元素。對於全天的背景事件,您必須確保 返回一個。

這可讓您爲計劃中的不同事件返回不同的佈局。基於附加到一個事件的類

var event = { 
    ... 
    className: 'booking-1' 
}; 

然後,在eventRender方法返回HTML::

eventRender : function(event, element, view) { 
    if (event.className.indexOf('booking-1') > -1) { 
    return '<span>1</span>'; 
    } else if (event.className.indexOf('booking-2') > -1) { 
    return '<span>2</span>'; 
    } 
} 

首先,添加自定義類到每個EventSource的,像這樣