Cytoscape.js 指令在调整容器大小时不会使尺寸无效

Question

我在 angular.js 指令中有一个 cytoscape.js 图表监听（观察）它的容器 div 宽度。当我在我的应用程序中折叠侧面板时，容器 div 占据了屏幕的整个宽度，然后 $watch 应该运行，然后 cy.resize()，然而它并没有像我希望的那样完成。

在我的 link 函数中调用容器

var container = angular.element(document.querySelector('#cy'));

它工作正常，我正在获取容器，并设置图形，它显示正常。

然后稍后，当容器 div 宽度改变时

scope.$watch(function () {
        return document.querySelectorAll("#cy")[0].clientWidth;
    }, function (newVal, oldVal) {
        if (newVal !== oldVal) {
            if (typeof cy.resize === 'function') {
                cy.resize();
            }
        }
    });

$watch 运行s 正如它应该的那样，div 确实变宽了，但容器只是移到了新的清理区域。地图并未在 .resize() 上失效，我得到的是鼠标位置计算错误。当我重新调整浏览器大小时 window 它会正确调整大小（如文档所述）。

如何在我的案例中强制调整大小？

Answer 1

您通过 Angular 设置的侦听器很可能没有按您预期的那样工作。 Angular 不是设置侦听器的可靠方法，除非您正在收听的所有内容都存在于 Angular 的模型中并更新同步与 Angular的更新周期。这是很多限制，我认为 Angular 不会满足您在这里的需求。

改为绑定到适当的事件，或者在调整 div.

大小的每个函数中调用 cy.resize()

Answer 2

经过长时间的尝试和连续失败，我们最终完成了这个过程

在我们连接到 window.onresize() 事件的控制器中。因为我们使用了 controllerAs，所以我们必须定义一个范围对象来观察一个布尔值，当 window 使用 getter 和 setter, 像这样

Object.defineProperty(vm, "toggleNav", {
        get: function () {
            return navToggled;
        },
        set: function (newValue) {
            navToggled = newValue;
            if (angular.isFunction(vm.resizeControl.onresize)) {
                vm.resizeControl.onresize();
            }
        }});
vm.resizeControl = {};

在指令中我们观察范围属性 (resizeControl) 变化

scope.resizeControl.onresize = function () {
    if (angular.isObject(cy) && angular.isFunction(cy.resize)) {
        $timeout(function () {
            cy.resize();
        });
    }
};

Cytoscape.js 指令在调整容器大小时不会使尺寸无效

Cytoscape.js directive not invalidating dimensions when container is resized

javascript

angularjs

cytoscape.js