AngularJS ng-repeat,$ scope变量问题并阻止无限$ digest循环

时间:2014-10-01 16:44:00

标签: javascript angularjs infinite-loop infinite ng-repeat

我需要找到一个关于ng-repeat,$ scope变量和无限$ digest循环的更好的解决方案。我确定这不是$ watch问题,我确信这是我更新$ scope变量的方式。

Chrome中不会出现此问题。它只发生在Safari和Firefox中。这就是我的做法。我有一个$ scope.chartCollection,它使用Google Chart对象动态填充。 $ scope.chartCollection可以有一个或多个谷歌图表对象,具体取决于我的选择。

在我的html模板中,我有这段代码,

<div ng-repeat="device in chartCollection">
    <div class="col-md-6  padding10px">
        <div class="widget enable-top-radius chartProperties">
            <div class="widget-title enable-top-radius dark-gray-title">
                <h4>
                    <span class="alignleft">
                        <i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
                    </span>
                </h4>
                <span class="alignright">{{device.location | uppercase }}</span>
                <div style="clear: both;" class="padding5px"></div>
            </div>
            <div class="widget-body">
                <div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
        <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
            <div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
                <div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
                <div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
                <div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
                <div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
                <div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
                <div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
            </div>
        </div>
    </div>
</div>

这样我就可以在不同的div中显示每个图表。它在Chrome中运行良好,但在Firefox和Safari中无效。

我在Firefox和Safari中收到此错误

https://docs.angularjs.org/error/ $ rootScope / infdig P0 = 10安培; P1 =%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D

我的情况类似于他们提到的第二个生成新数组的例子。但是,在我的情况下,它将永远是一个新阵列。

我在考虑不使用ng-repeat并使用$ scope.chart1,$ scope.chart2等,但这种方法的问题是我无法判断是否会有1,10或20个图表,因为所有内容都是动态生成的。代码会非常混乱!

更新: 以下是生成图表对象的代码 http://pastebin.com/DmQkDHjW

0 个答案:

没有答案