Visjs timeline disappears after angular restart
I wrapped the visjs timeline in an angular directive. When I call $ route.reload () in an external controller, the timeline disappears. After the page reload is complete, the directive still has a reference to the original timeline object and the dom element is not changed.
Does anyone know what might make it just disappear?
I created a plunkr, but I don't know how to reload the route inside the plunker, as this will change the 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>'
};
}
source to share
To reload a route needs to set up a route for the controller, see this fork of your plunger. This seems to work well with your implemented directive, then I am not sure about this reason, later I will add some pending changes pending.
Explanation of the plunker:
controller: function($scope, $element) {
var items = new vis.DataSet();
var container = $element[0];
The angular directive already has a reference to the DOM element ( $element
) itself, so it can be safely used instead of going throughdocument.getElementById
$scope.$on('$destroy', function () {
console.log('Destroying directive ...')
timeline.destroy();
});
These lines ensure that the timeline is destroyed when the directive is destroyed, for the timeline has a method destroy()
to clean up the affected DOM elements.
source to share