Question

我一直在尝试创建一个水平时间表，以使用angularjs列出一个人的成就及其年龄。我在这里找到了这支笔：https://codepen.io/mishamean/pen/PEoWrK。这使用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>

我被困在几个地方： 1.为了解决这个问题，我正在创建一个工厂，该工厂具有创建时间轴的必要功能，然后可以与指令中的链接功能一起使用。但是，在创建工厂时，我无法执行所需的内部链接。那就是原始文件有js，它内部链接到不同的函数。 2.如果我考虑原始的代码笔，他们也使用了不同的功能，这些功能没有返回值。我们如何创建没有返回值的函数。 3.还有一个问题，如果我在指令中使用angular.element来引用用于DOM操作的元素，则会得到new-sec元素，但这总是在通过控制器加载实际时间线之前。如何使用angular.element以便在加载完整文件后获取元素？

使用angularjs创建水平时间线

0 个答案: