visjs时间线在角度重新加载后消失

问题描述：

我已将visjs时间线包裹到角度指令中。当我在外部控制器中调用$ route.reload（）时，时间线消失。页面重新加载完成后，该指令仍然具有对原始时间轴对象的引用，并且dom元素看起来不会改变。visjs时间线在角度重新加载后消失

有谁知道什么可能导致它消失？

我已经创建了一个plunkr，但我不知道如何重新加载一个plunker里面的路由，因为这会改变url。

http://plnkr.co/edit/hwShQ2iYR7TOcILSBcEY?p=preview

function timelineViewer() { 

    var timeline; 
    return { 
    restrict: 'E', 
    replace: true, 
    scope: { 
     data: '=' 
    }, 
    controller: function($scope) { 
     var items = new vis.DataSet(); 
     var container = document.getElementById('vis-timeline'); 

     var options = { 
     height: 100, 
     width: 600, 
     zoomMin: 1000 * 60 * 2, 
     zoomMax: 1000 * 60 * 20 
     }; 

     items.clear(); 
     items.add($scope.data); 

     timeline = new vis.Timeline(container, items, options); 

     console.log('Reloading directive ...') 
    }, 
    template: '<div id="vis-timeline"></div>' 
    }; 
}

答

要重新加载路线需要设置为控制器的路线，看到这个fork您plunker的。这似乎与实施指导工作得很好，那么我不知道原因，后来我加了一些变化预期，以解决这个问题

在解释plunker：

controller: function($scope, $element) { 
    var items = new vis.DataSet(); 
    var container = $element[0];

角的指令已经到自身的DOM元素（$element）的基准，所以它可以安全地使用，而不是得到它的通过document.getElementById

$scope.$on('$destroy', function() { 
    console.log('Destroying directive ...') 
    timeline.destroy(); 
});

此线确保破坏时间轴瓦特如果该指令被破坏，则时间线具有用于清除受影响的DOM元素的方法destroy()

visjs时间线在角度重新加载后消失

相关推荐