TimelineJS 和 AngularJS

Posted 2023-05-07

【中文标题】TimelineJS 和 AngularJS

【英文标题】：TimelineJS and AngularJS

【发布时间】：2015-04-06 17:18:29

【问题描述】：

我正在尝试使用 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 文件，即使在没有插件的情况下加载它或直接将其作为源输入（而不是“scope.results”）时它也可以工作。我还能够毫无问题地加载普通的 JSON 文件，并且我生成的 JSON 完美验证。

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

【参考方案1】：

看看注入$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);
        
    
);

【参考方案2】：

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

实际上@Mikey 建议的选项也可以工作（只是你不需要postpone，只需用$timeout 包裹你的createStoryJS 让DOM 先渲染元素）