javascript - Angular JS - "Error: [$interpolate:interr] Can' t 插值 :"when using Highcharts

Question

我正在尝试向我的应用添加指令，请查看此处的演示:

http://plnkr.co/edit/XlmS8wIuyrwYXXaXbdPr?p=preview

代码在浏览器(Chrome 33)上呈现，但控制台仍然抛出错误:

Error: [$interpolate:interr] Can't interpolate:{{example_chart}}
TypeError: Converting circular structure to JSON

有谁知道为什么控制台会抛出错误，而其他一切仍能顺利进行？只是试图理解“为什么”，即使代码似乎有效。

这是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();
}

和 HTML:

<div ng-controller="Ctrl">
     <highchart chart='{{example_chart}}'></highchart>
  </div>

Answer 1

就这样

<highchart chart='example_chart'></highchart>

这将传入对象而不是内插字符串。