Question

我已将visjs时间轴包含在角度指令中。当我在外部控制器中调用$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>'
  };
}

Answer 1

要为控制器设置路线，需要重新加载路线，请参阅此弹射器的fork。它似乎与你实现的指令很好用，然后我不确定原因，后来我添加了一些期望解决问题的更改

解释说明者：

<% %> # Executes the code.

<%= %> # Prints the output.

angular的指令已经引用了自身的DOM元素（controller: function($scope, $element) { var items = new vis.DataSet(); var container = $element[0];），因此可以安全地使用它而不是通过$element

document.getElementById

此行确保在销毁指令时销毁时间轴，时间轴使用方法$scope.$on('$destroy', function () { console.log('Destroying directive ...') timeline.destroy(); });来清除受影响的DOM元素

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

1 个答案: