Question

我正在使用Angular Highcharts，虽然我不认为在这种情况下会产生很大的不同。我正在使用响应式设计，图表出现之前“计算出”父元素的大小。没问题，除了触发重排似乎不能在重绘或加载的回调中起作用。

以下是基本代码：

events: {
    redraw: function(event) {
        $rootScope.$broadcast('highchartsng.reflow');
    }
}

如果我使用“加载”而不是重绘，那么它首先触发时会更糟糕，并且根本无法识别高图对象。

Answer 1

这就是MutationObserver的用途。在IE11中可用，https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver。你需要向控制器中注入$ element服务，这会破坏DOM /控制器分离，但我觉得这是angularjs中的一个基本异常（即缺陷）。由于hide / show是异步的，我们需要on-show回调，即angularjs＆amp; angular-bootstrap-tab不提供。它还要求你知道你想要观察哪个特定的DOM元素。我使用了angularjs控制器的以下代码来触发Highcharts图表回流显示。

const myObserver = new MutationObserver(function (mutations) {
    const isVisible = $element.is(':visible') // Requires jquery
    if (!_.isEqual(isVisible, $element._prevIsVisible)) { // Lodash
        if (isVisible) {
            $scope.$broadcast('onReflowChart')
        }
        $element._prevIsVisible = isVisible
    }
})
myObserver.observe($element[0], {
    attributes: true,
    attributeFilter: ['class']
})

Highcharts事件使用reflow重绘/加载，以及Angular

1 个答案: