Question

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

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

代码在浏览器上呈现（Chrome 33），但控制台仍然会抛出错误：

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

任何人都知道为什么控制台会在其他所有内容成功的情况下抛出错误？只是想了解＆＃34;为什么＆＃34;即使代码似乎有用。

这是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>

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

Angular JS - ＆＃34;错误：[$ interpolate：interr]无法插值：＆＃34;使用Highcharts时

1 个答案: