Angular JS - “错误:[$interpolate:interr] 无法插值:"使用 Highcharts 时 [英] Angular JS - "Error: [$interpolate:interr] Can't interpolate:" when using Highcharts

问题描述

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

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

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

错误:[$interpolate:interr] 无法内插:{{example_chart}}类型错误:将圆形结构转换为 JSON

有谁知道为什么控制台会抛出错误而其他一切都成功了?即使代码似乎有效，也只是想了解为什么".

这是JS:

var myapp = angular.module('myapp', ["ui.router"])myapp.config(function($stateProvider, $urlRouterProvider){//对于任何不匹配的 url，发送到/route1$urlRouterProvider.otherwise("/route1")$stateProvider.state('route1', {网址:/route1"，templateUrl: "route1.html"}).state('route1.list', {网址:/列表"，templateUrl: "route1.list.html",控制器:功能($范围){$scope.items = ["A", "List", "Of", "Items"];}}).state('route2', {网址:/route2"，templateUrl: "route2.html"}).state('route2.list', {网址:/列表"，templateUrl: "route2.list.html",控制器:功能($范围){$scope.things = ["A", "Set", "Of", "Things"];}})})myapp.directive('highchart', function () {返回 {限制:'E'，模板:'<div></div>',替换:真的，链接:函数(范围、元素、属性){scope.$watch(function() { return attrs.chart; }, function() {if(!attrs.chart) 返回；var chart = scope.example_chart;element.highcharts(图表);});}};});函数 get_chart() {返回 {x轴:{类别:['Jan'、'Feb'、'Mar'、'Apr'、'May'、'Jun'、'Jul'、'Aug'、'Sep'、'Oct'、'Nov'、'Dec']},绘图选项:{系列: {光标:'指针'，观点: {事件:{点击:函数(){警报('类别:'+ this.category +'，值:'+ this.y);}}}}},系列: [{数据:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}]};}功能Ctrl($范围){$scope.example_chart = get_chart();}

和 HTML:

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

解决方案

Just do

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

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>

解决方案

Just do

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

This will pass in the object instead of interpolated string.

这篇关于Angular JS - “错误:[$interpolate:interr] 无法插值:"使用 Highcharts 时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！