Question

我已经编写了一对指令，用于在单击元素时将一些元素中的一个放大到更大的尺寸。单击缩放元素应将其恢复为正常大小。当元素被缩放时，它的姐妹元素（它们都是d3图表）变得不可见。当放大的元素未被激活时，它们会恢复到可见性。

这是HTML的样子：

<chart-container class="chart" chart-height="400" >
    <h3 class="text-center">Vehicles by year</h3>
    <div class="text-center" full-screen-toggle>
        <bar-chart bar-data="{{vehiclesByYear}}"
                    layout="{{vehiclesByYearLayout}}"
                    bar-labels="{$dy: '-.5em', $anchor: 'middle'}"></bar-chart>
    </div>
</chart-container>
<chart-container class="chart" chart-height="400">
    <h3 class="text-center">Vehicle speed distribution</h3>
    <div class="text-center" full-screen-toggle>
        <pie-chart pie-data="{{aboveBelow}}"
                   layout="{{aboveBelowLayout}}"></pie-chart>
    </div>
</chart-container>

魔术在元素指令图表容器和属性指令全屏幕切换中。后者总是在图表容器中装饰子元素。这是两个指令的代码：

angular.module( 'MarkOlbert.fullScreenChart', [] ).directive( 'chartContainer', function () {
    return {
        restrict: 'E',
        scope: {
            chartHeight: '@chartHeight',
        },
        controller: ['$scope', '$element', '$rootScope', function ( $scope, $element, $rootScope ) {
            var zoomState = 'normal';
            var _self = this;

            this.changing = false;
            this.chartHeight = $scope.chartHeight;

            function unZoom() {
                $element.css('width', '50%' );

                _self.changing = true;
                $rootScope.$broadcast( 'chart:unzoom' );
                _self.changing = false;

                zoomState = 'normal';
            }

            function zoom() {
                $element.css( 'width', '100%' );

                _self.changing = true;
                $rootScope.$broadcast( 'chart:zoom' );
                _self.changing = false;

                zoomState = 'full';
            }

            $element.on( 'click', function () {
                switch ( zoomState ) {
                    case 'normal':
                        zoom();
                        break;

                    case 'full':
                        unZoom();
                        break;
                }
            } );

            $rootScope.$on( 'chart:unzoom', function () {
                if ( _self.changing ) return;

                $element.css( 'display', 'block' );
            } );

            $rootScope.$on( 'chart:zoom', function () {
                if ( _self.changing ) return;

                $element.css( 'display', 'none' );
            } );
        }],
    };
} );

angular.module( 'MarkOlbert.fullScreenToggle', [] ).directive( 'fullScreenToggle', function ($rootScope) {
    return {
        restrict: 'A',
        require: '^^chartContainer',
        link: function(scope,element,attrs, chartCtrl){
            element.css('height', chartCtrl.chartHeight );

            $rootScope.$on( 'chart:zoom', function () {
                if ( !chartCtrl.changing ) return;

                element.css( 'height', 1000 );
            } );

            $rootScope.$on( 'chart:unzoom', function () {
                element.css( 'height', chartCtrl.chartHeight );
            } );
        },
    };
} );

在条形图指令中，我有一个简单的手表，它应该响应条形图高度的变化：

    scope.$watch( function () { return element.height(); }, function () {
        if ( element.height() == 0 ) return;
    }, true );

现在它没有做任何事情，因为我试图找出为什么在全屏幕切换改变高度时不会调用它。

显示/隐藏功能按设计工作。图表容器和全屏幕切换中的所有各种事件侦听器都应该被调用，并且执行时没有错误。

当chart-container更改其元素的宽度时，页面会按预期更新。但是当全屏切换改变条形图的高度时，没有任何反应。条形图中的$ watch永远不会开火。

Answer 1

data是一个jqLite / jQuery方法，不会自动触发AngularJS的摘要循环。

现在发生的事情是：

点击元素
称为缩放或取消缩放
元素的CSS已更改
播放活动
通知
元素的高度已更改

但由于摘要周期从未被触发，因此检查元素高度的观察者将永远不会执行，也不会检测到任何变化。

您可以使用getData：

public class Example {

    private int data;

    public void function1(){

    }

    public void function2(){

    }

    protected int getData(){
        refresh();
        return data;
    }

    //@BeforeOtherFunction
    private void refresh(){
        // refresh data
    }
}

角度：未检测到高度变化

1 个答案: