I'm trying to add a directive to my app, check out the demo here:
http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview
The code renders on the browser (Chrome 33) but the console still throws the error:
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:
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:
<div ng-controller="Ctrl"> <highchart chart='{{example_chart}}'></highchart> </div>