angularjs / gridster / n3-charts ：chrome/firefox 中的 $digest 错误，但 safari 中没有
angularjs / gridster / n3-charts : $digest error in chrome/firefox but not in safari
我有一个 angular 应用程序可以创建一个包含项目图表的仪表板。
仪表板布局基于 angular-gridster，n3-charts 上的图表。
当我想在 gridster 项目中显示图表时，我使用以下指令：
<div class="widget-main">
<div ng-show="widget.loadingData" class="loader">Loading...</div>
<widgetContentElement ng-show="!widget.loadingData"></widgetContentElement>
</div>
在 widgetContentElement 中我有以下模板
<div id="linechartParent">
<linechart data="chartData" options="chartOptions" mode="" width="" height=""></linechart>
</div>
我的问题是图表一显示在 Safari 中，它就不适合容器。在 Chrome/Safari 它试图适应它。宽度没问题，但高度增加了 25px，直到出现以下错误：
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D
at angular.js:68
at Scope.$digest (angular.js:15934)
at Scope.$apply (angular.js:16160)
at done (angular.js:10589)
at completeRequest (angular.js:10787)
at XMLHttpRequest.requestLoaded (angular.js:10728)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292Scope.$apply @ angular.js:16162done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D(anonymous function) @ angular.js:68Scope.$digest @ angular.js:15934Scope.$apply @ angular.js:16160done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
奇怪的是，如果我进入 CSS 滑动菜单，那么图表的大小会很好地调整，我可以使用图表（缩放、滑动等），但只能在 Chrome / 火狐。在 Safari 上，图表功能齐全，没有崩溃，但从未调整过大小
我不明白为什么它与 Safari 和 Chrome（至少）不同，因为我认为它们使用相同的 webkit（但可能不是相同的 JS 引擎）
欢迎任何调试帮助或提示！
谢谢
Ok 发现它似乎来自 n3-charts 选项上的观察者。
在主js文件中替换
options = _u.sanitizeOptions(scope.options, attrs.mode);
和
options = _u.sanitizeOptions(angular.copy(scope.options), attrs.mode);
我有一个 angular 应用程序可以创建一个包含项目图表的仪表板。 仪表板布局基于 angular-gridster，n3-charts 上的图表。 当我想在 gridster 项目中显示图表时，我使用以下指令：
<div class="widget-main">
<div ng-show="widget.loadingData" class="loader">Loading...</div>
<widgetContentElement ng-show="!widget.loadingData"></widgetContentElement>
</div>
在 widgetContentElement 中我有以下模板
<div id="linechartParent">
<linechart data="chartData" options="chartOptions" mode="" width="" height=""></linechart>
</div>
我的问题是图表一显示在 Safari 中，它就不适合容器。在 Chrome/Safari 它试图适应它。宽度没问题，但高度增加了 25px，直到出现以下错误：
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D
at angular.js:68
at Scope.$digest (angular.js:15934)
at Scope.$apply (angular.js:16160)
at done (angular.js:10589)
at completeRequest (angular.js:10787)
at XMLHttpRequest.requestLoaded (angular.js:10728)(anonymous function) @ angular.js:12520(anonymous function) @ angular.js:9292Scope.$apply @ angular.js:16162done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
angular.js:68 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [[{"msg":"options","newVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":775}},"oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":625}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":650}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":675}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":700}}}],[{"msg":"options","newVal":"...","oldVal":{"axes":{"x":{"key":"x","type":"date"},"y":{"type":"linear","ticks":5,"innerTicks":true,"grid":true}},"series":[{"y":"value","color":"steelblue","thickness":"1px","type":"area","striped":true,"label":"Pouet","axis":"y","dotSize":2,"id":"series_0"}],"lineMode":"linear","tension":0.7,"tooltip":{"mode":"scrubber"},"drawLegend":true,"drawDots":true,"hideOverflow":false,"columnsHGap":5,"stacks":[],"margin":{"top":20,"right":50,"bottom":60,"left":50,"width":1157,"height":725}}}]]
http://errors.angularjs.org/1.4.8/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…2C%22left%22%3A50%2C%22width%22%3A1157%2C%22height%22%3A725%7D%7D%7D%5D%5D(anonymous function) @ angular.js:68Scope.$digest @ angular.js:15934Scope.$apply @ angular.js:16160done @ angular.js:10589completeRequest @ angular.js:10787requestLoaded @ angular.js:10728
奇怪的是，如果我进入 CSS 滑动菜单，那么图表的大小会很好地调整，我可以使用图表（缩放、滑动等），但只能在 Chrome / 火狐。在 Safari 上，图表功能齐全，没有崩溃，但从未调整过大小
我不明白为什么它与 Safari 和 Chrome（至少）不同，因为我认为它们使用相同的 webkit（但可能不是相同的 JS 引擎）
欢迎任何调试帮助或提示！ 谢谢
Ok 发现它似乎来自 n3-charts 选项上的观察者。
在主js文件中替换
options = _u.sanitizeOptions(scope.options, attrs.mode);
和
options = _u.sanitizeOptions(angular.copy(scope.options), attrs.mode);