visjs 时间轴在 angular 路由重新加载后消失
visjs timeline disappears after angular route reload
我已将 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>'
};
}
要重新加载路由需要为控制器设置路由,请参阅您的 plunker fork。
它似乎与您实施的指令配合得很好,然后我不确定原因,稍后我添加了一些希望解决问题的更改
解释 plunker:
controller: function($scope, $element) {
var items = new vis.DataSet();
var container = $element[0];
angular的指令已经有对自身($element
)的DOM元素的引用,所以可以安全地使用它而不是通过[=13]获取它=]
$scope.$on('$destroy', function () {
console.log('Destroying directive ...')
timeline.destroy();
});
此行确保在指令被销毁时销毁时间线,时间线具有方法destroy()
来清除受影响的DOM个元素
我已将 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>'
};
}
要重新加载路由需要为控制器设置路由,请参阅您的 plunker fork。 它似乎与您实施的指令配合得很好,然后我不确定原因,稍后我添加了一些希望解决问题的更改
解释 plunker:
controller: function($scope, $element) {
var items = new vis.DataSet();
var container = $element[0];
angular的指令已经有对自身($element
)的DOM元素的引用,所以可以安全地使用它而不是通过[=13]获取它=]
$scope.$on('$destroy', function () {
console.log('Destroying directive ...')
timeline.destroy();
});
此行确保在指令被销毁时销毁时间线,时间线具有方法destroy()
来清除受影响的DOM个元素