Question

我在我的项目中使用AngularJs，因此我的应用程序中的所有主要内容都是使用角度的ng-view指令加载的，我想在我的应用程序中使用TimelineJs实现时间轴，时间轴得到一个id（放置的位置）时间轴）但我的div与该id通过异步加载角度所以当TimelineJs脚本运行时div #id不存在，任何想法如何解决这个问题？

这是代码：

$(document).ready(function() {
    createStoryJS({
        type:       'timeline',
        width:      '800',
        height:     '400',
        source:     './timeline.json',
        embed_id:   'dash-tim'
    });
});

这是错误：

Uncaught TypeError: Cannot call method 'appendChild' of null storyjs-embed.js:45
T storyjs-embed.js:45
createStoryJS storyjs-embed.js:45
(anonymous function) extra.js:21
fire jquery-1.8.2.js:974
self.fireWith jquery-1.8.2.js:1082
jQuery.extend.ready jquery-1.8.2.js:406
DOMContentLoaded

Answer 1

以下是我如何实施它。

我有一个角度指令调用timelineJS代码来修改dom（我不是一个有远见的专家，但这似乎是其他人推荐的模式）。

HTML

<div ng-app="StoryUniverse" ng-controller="EventsListCtrl">
        <div id="my-timeline" timeline-js></div>
</div>

Angular Directive

app.directive('timelineJs',  function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            postpone = $timeout(function() {
                createStoryJS({
                    type:       'timeline',
                    width:      '800',
                    height:     '600',
                    source:     scope.events,
                    embed_id:   'my-timeline',
                    css:        'lib/timelinejs/css/timeline.css',
                    js:         'lib/timelinejs/js/timeline.js'
                });
            }, 0);
            console.log("Running timelineJS");
        }
    }
});

TimelineJs和AngularJs ng-view内容

1 个答案: