Restrict timeline directive to element name to avoid conflicts

app/assets/javascripts/angular/directives/timeline_directive.js

@@ -1,6 +1,9 @@
 openprojectApp.directive('timeline', ['TimelineLoaderService', 'TimelineTableHelper', function(TimelineLoaderService, TimelineTableHelper) {
   return {
-    restrict: 'A',
+    restrict: 'E',
+    replace: true,
+    transclude: true,
+    template: '<div ng-transclude ng-class="{timeline: true, \'tl-under-construction\': underConstruction}" />',
     link: function(scope, element, attributes) {
       updateToolbar = function() {
         scope.slider.slider('value', scope.timeline.zoomIndex + 1);

app/views/timelines/_chart_container.html

@@ -1,4 +1,4 @@
- <div timeline ng-class="{timeline: true, 'tl-under-construction': underConstruction}">
+ <timeline>
   <div class="tl-left">
     <div class="tl-left-top tl-decoration"></div>
     <div class="tl-left-main">
@@ -19,4 +19,4 @@
     <div class="tl-tooltip-inner"></div>
     <div class="tl-tooltip-arrow"></div>
   </div>
-</div>
+</timeline>