TimelineJS和AngularJS

时间:2015-04-06 17:18:30

标签: javascript php json angularjs timeline.js

我正在尝试使用Angular指令嵌入时间轴,该指令从php生成的JSON文件(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);
        }
    }
});

时间轴不加载PHP文件,即使它在没有插件的情况下加载时也可以,或者直接输入它作为Source(而不是' scope.results')。我也能够正常加载普通的JSON文件,并且我生成的JSON完全验证。

我需要能够使用json.php文件。感谢。

2 个答案:

答案 0 :(得分:0)

查看注入$rootScope服务是否有帮助。

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);
        }
    }
});

答案 1 :(得分:0)

如果您将AngularJs与TimelineJs一起使用,那么我建议您使用Angular代码进行编码,而不是使用createStoryJS。请查看angular-timelinejs

实际上@Mikey建议的选项也可以正常工作(只是你不需要那个postpone,只需用createStoryJS包裹$timeout让DOM首先渲染元素)