Question

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

在我的链接功能中，我正在调用容器

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()上没有失效，我得到的是鼠标位置计算错误。当我重新调整浏览器窗口的大小时，它会正确调整大小（正如文档中提到的那样）。

如何在我的情况下强制调整大小？

Answer 1

通过Angular设置的听众很可能没有像你期望的那样工作。 Angular不是设置监听器的可靠方式，除非您收听的所有内容都存在于Angular的模型中，并使用Angular的更新周期更新同步。这有很多限制，我不认为Angular会为你想要的东西工作。

改为绑定到正确的事件，或者在调整div的每个函数中调用cy.resize()。

Answer 2

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

我们连接到var sampleApp = angular.module('dataFinderApp',['ngRoute']); sampleApp.config(['$routeProvider', function($routeProvider){.....}]);事件。因为我们使用window.onresize()我们必须定义一个范围一个对象来观察一个布尔值，当窗口的大小调整到更大的宽度时，使用一个getter和一个setter来实现它，就像这样
```
controllerAs
```
在我们观察的范围属性（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
```

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

2 个答案: