角JS - 「錯誤：[$插值：INTERR]不能插：」使用Highcharts

我想一個指令添加到我的應用程序時，請查看這裏的演示：

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>

來源

2014-03-14 Mike

只是做

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

這將在對象，而不是插字符串傳遞。

來源

2014-03-14 03:25:09 zsong

角JS - 「錯誤：[$插值：INTERR]不能插：」使用Highcharts

回答

相關問題