角度路线重新加载后，visjs时间线消失答案

【问题标题】：visjs timeline disappears after angular route reload角度路线重新加载后，visjs时间线消失
【发布时间】：2015-07-12 16:08:42
【问题描述】：

我已将 visjs 时间线包装到 angular 指令中。当我在外部控制器中调用$route.reload() 时，时间线消失了。页面重新加载完成后，指令仍然具有对原始时间线对象的引用，并且 dom 元素似乎没有改变。

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

我创建了一个 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>'
  };
}

【问题讨论】：

标签： javascript angularjs vis.js vis.js-timeline

【解决方案1】：

要重新加载路由，需要为控制器设置路由，请参阅您的 plunker 的 fork。它似乎与您实施的指令配合得很好，然后我不确定原因，稍后我添加了一些期望解决问题的更改

解释plunker：

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

angular 的指令已经引用了自身的 DOM 元素 ($element)，因此可以安全地使用它，而不是通过 document.getElementById 获取它

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

这几行保证在指令被销毁时销毁时间线，时间线有destroy()方法来清理受影响的DOM元素

【讨论】：