javascript Angular JS - 使用 Highcharts 时“错误：[$interpolate:interr] 无法插值：”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22393717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS - "Error: [$interpolate:interr] Can't interpolate:" when using Highcharts
提问by Mike
I'm trying to add a directive to my app, check out the demo here:
我正在尝试向我的应用程序添加指令，请在此处查看演示：
http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview
http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview
The code renders on the browser (Chrome 33) but the console still throws the error:
代码在浏览器（Chrome 33）上呈现，但控制台仍然抛出错误：
Error: [$interpolate:interr] Can't interpolate:{{example_chart}}
TypeError: Converting circular structure to JSON
Anyone know why the console throws errors while still having everything else goes successfully? Just trying to understand the "why" even though the code seems to work.
任何人都知道为什么控制台会抛出错误而其他一切都成功？即使代码似乎有效，也只是想了解“为什么”。
Here is the JS:
这是JS：
var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /route1
$urlRouterProvider.otherwise("/route1")
$stateProvider
.state('route1', {
url: "/route1",
templateUrl: "route1.html"
})
.state('route1.list', {
url: "/list",
templateUrl: "route1.list.html",
controller: function($scope){
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('route2', {
url: "/route2",
templateUrl: "route2.html"
})
.state('route2.list', {
url: "/list",
templateUrl: "route2.list.html",
controller: function($scope){
$scope.things = ["A", "Set", "Of", "Things"];
}
})
})
myapp.directive('highchart', function () {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
link: function (scope, element, attrs) {
scope.$watch(function() { return attrs.chart; }, function() {
if(!attrs.chart) return;
var chart = scope.example_chart;
element.highcharts(chart);
});
}
};
});
function get_chart() {
return {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
alert ('Category: '+ this.category +', value: '+ this.y);
}
}
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
};
}
function Ctrl($scope) {
$scope.example_chart = get_chart();
}
And HTML:
和 HTML：
<div ng-controller="Ctrl">
<highchart chart='{{example_chart}}'></highchart>
</div>
回答by zs2020
Just do
做就是了
<highchart chart='example_chart'></highchart>
This will pass in the object instead of interpolated string.
这将传入对象而不是内插字符串。
