Javascript 使用angularjs创建水平时间线

我一直在尝试使用angularjs创建一个横向时间表，列出一个人的成就和他的年龄。我在这里找到这支钢笔。这将使用jquery执行类似的任务。我一直试图用纯angularjs制作一个完全相似的东西。 为此，我创建了一个名为

相关的js文件是：

var app = angular.module('timelineApp', []);

app.controller('tryCtrl', function ( $scope, $http ) {
    console.log('Here as well');
})

app.directive('newsec', function () {
    'use strict';


console.log(angular.element);

return {
    restrict: 'EA',
    templateUrl: 'view.html',
    controller: function ( $http, $scope ) {
        /*
        console.log('Entered here');
        var timelines = document.getElementsByClassName('cd-horizontal-timeline');
        console.log(timelines);
        */

        $http({
            method: 'get',
            url: '../json/event.json'
        }).then(function (response) {
            $scope.events = response.data.events;
        }, function myError(response) {
            console.log('Error');
        })

        $http({
            method: 'get',
            url: '../json/timeline.json'
        }).then(function (response) {
            $scope.time = response.data.timeline;
        })

    },

}
})

view.html文件是：

  <section class="cd-horizontal-timeline" ng-controller="tryCtrl">
      <div class="timeline">
        <div class="events-wrapper">
          <div class="events">
            <ol>
              <li ng-repeat = "dt in time"><a href="" data-date="{{dt.dd}}" ng-class="{selected:$first}">{{dt.dc}}</a></li>
            </ol>

            <span class="filling-line" aria-hidden="true"></span>
          </div>
          <!-- .events -->
        </div>
        <!-- .events-wrapper -->

        <ul class="cd-timeline-navigation">
          <li><a href="" class="prev inactive">Prev</a></li>
          <li><a href="" class="next">Next</a></li>
        </ul>
        <!-- .cd-timeline-navigation -->
      </div>
      <!-- .timeline -->

      <div class="events-content">
        <ol>
          <li ng-repeat="dc in events" data-date="{{dc.dt}}" ng-class="{selected:$first}">
            <p>{{dc.p}}
            </p>
          </li>
        </ol>
      </div>
      <!-- .events-content -->
    </section>

{{dc.p}}

我被困在几个地方： 1.为了解决这个问题，我创建了一个工厂，它具有创建时间线所需的功能，然后可以与指令中的链接功能一起使用。但是，在创建工厂时，我无法进行所需的内部链接。也就是说，原始文件有js，js在内部链接到不同的函数。 2.如果我考虑原始的CODEPDEN，它们也使用了不同的函数，这些函数没有返回值。我们如何创建没有返回值的函数。

---

3.我遇到的另一个问题是，如果我在指令中使用angular.element引用DOM操作的元素，我会得到新的sec元素，但这总是在通过控制器加载实际时间线之前。如何使用angular.element，以便在加载完整文件后获取元素？

哪个链接？