javascript - TimelineJs 和 AngularJs ng-查看内容

Question

我在我的项目中使用AngularJs，所以我的应用程序中的所有主要内容都是使用Angular的ng-view指令加载的，我想在我的应用程序中使用TimelineJs实现时间轴，时间轴得到一个id(放置的地方)时间线)，但是我的具有该 id 的 div 是通过 Angular 异步加载的，因此当 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

这是我的实现方式。

我有一个 Angular 指令，它调用TimelineJS 代码来修改 dom(我绝对不是 AngularJS 专家，但这似乎是其他人推荐的模式)。

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