Angular JS - "Error: [$interpolate:interr] Can't in

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

本文关键字:interr Can in interpolate JS quot Error Angular      更新时间:2023-09-26

我想在我的应用程序中添加一个指令,看看这里的演示:

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

预览

代码在浏览器(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>

只管做

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

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