0

我在我的项目中使用 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
4

1 回答 1

2

这是我实现它的方式。

我有一个 angular 指令，它调用timelineJS 代码来修改dom（我不是一个长镜头的angularjs 专家，但这似乎是其他人推荐的模式）。

HTML

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

角度指令

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");
        }
    }
});
于 2013-08-30T02:11:01.263 回答