Javascript Cytoscape.js指令在调整容器大小时不使维度无效

我在angular.js指令中有一个cytoscape.js图形，用于监听（监视）它的容器div宽度。当我在应用程序中折叠侧面板时，container 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运行正常，div确实变宽了，但容器只是移到了新清理的区域。地图在
.resize（）
上没有失效，我得到的是鼠标位置计算错误。当我重新调整浏览器窗口的大小时，它会正确地调整大小（正如文档中提到的）

在我的情况下，如何强制调整大小？
很可能您通过Angular设置的侦听器没有按预期工作。Angular不是设置侦听器的可靠方法，除非您正在收听的所有内容都在Angular的模型中，并且与Angular的更新周期同步更新。这有很多限制，我不认为Angular能满足你的要求

改为绑定到适当的事件，或者在调整分区大小的每个函数中调用
cy.resize（）
。
经过长时间的尝试，我们最终完成了此过程

在控制器中，我们连接到
window.onresize（）
事件。因为我们使用了
controllerAs
，所以我们必须定义一个作用域，一个对象来观察一个布尔值，当窗口被调整到更大的宽度时，这个布尔值变为真，使用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 = {};


在指令中，我们观察了scope属性（
resizeControl
）的变化


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