TimelineJS and AngularJS

Question

I am trying to embed a timeline, using an Angular directive, which loads data from a php-generated JSON file (timeline.json.php).

    var app = angular.module("timeline", []);

app.controller('timelineCtrl', ['$scope', '$http',
  function ($scope, $http) {
    $http.get('timeline.json.php').success(function(data) {
      $scope.results = data;
            console.log($scope.results);
    });
}]);

app.directive('timelineJs',  function ($timeout) {
    return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
    postpone = $timeout(function() {
                createStoryJS({
                    width:          '100%',
                    hash_bookmark: true,
                    height:         '600',
                    source:         scope.results,
                    embed_id:       'my-timeline',
                    css:            'http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css',
                    js:             'http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js'
                });
            }, 0);
        }
    }
});

The timeline does not load the PHP file, even though it works when loading it without the plugin, or entering it directly as the Source (instead of 'scope.results'). I am also able to load a normal JSON file without issue, and my generated JSON validates perfectly.

I need to be able to use the json.php file. Thanks.

score 0 · Answer 1 · answered Apr 06 '15 at 18:01

See if it helps to inject $rootScope service.

app.directive('timelineJs',  function ($timeout, $rootScope) {//inject $rootScope
    return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
    postpone = $timeout(function() {
                createStoryJS({
                    width:          '100%',
                    hash_bookmark: true,
                    height:         '600',
                    source:         scope.results,
                    embed_id:       'my-timeline',
                    css:            'http://cdn.knightlab.com/libs/timeline/latest/css/timeline.css',
                    js:             'http://cdn.knightlab.com/libs/timeline/latest/js/timeline-min.js'
                });
            }, 0);
        }
    }
});

score 0 · Answer 2 · answered Jun 29 '15 at 17:39

If you use AngularJs with TimelineJs, then I suggest you to go and code with Angular code, not using createStoryJS. Please take a look at angular-timelinejs

Actually the option that @Mikey suggested could work too (just you don't need that postpone, just wrap your createStoryJS with $timeout to let the DOM render elements first)

TimelineJS and AngularJS

2 Answers2