角JS - ＆QUOT;错误：[$插值：INTERR]不能插：＆QUOT;使用Highcharts时

问题描述

我想一个指令添加到我的应用程序，看看这里的演示：

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

 错误：[$插值：INTERR]不能插：{{example_chart}}
类型错误：转换圆形结构，以JSON
 

任何人都知道为什么，同时还具有一切都会顺利控制台抛出错误？只是想了解为什么即使code似乎工作。

下面是JS：

  VAR的myapp = angular.module（'MyApp的，[ui.router]）
myapp.config（函数（$ stateProvider，$ urlRouterProvider）{  //对于任何无与伦比的网址，发送到/ ROUTE1
  $ urlRouterProvider.otherwise（/ ROUTE1）  $ stateProvider
    .STATE（'ROUTE1'，{
        网址：/ ROUTE1
        templateUrl：route1.html
    }）
      .STATE（'route1.list'，{
          网址：/表，
          templateUrl：route1.list.html
          控制器：函数（$范围）{
            $ scope.items =A，列表，项，中];
          }
      }）    .STATE（'路径2'，{
        网址：/路径2
        templateUrl：route2.html
    }）
      .STATE（'route2.list'，{
          网址：/表，
          templateUrl：route2.list.html
          控制器：函数（$范围）{
            $ scope.things =A，设置，中，物联网];
          }
      }）
}）
myapp.directive（'highchart'，函数（）{
  返回{
      限制：'E'，
      模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
      更换：真实，      链接：功能（范围，元素，ATTRS）{          。范围$表（函数（）{返回attrs.chart;}，函数（）{            如果回报（attrs.chart！）;            VAR图= scope.example_chart;            element.highcharts（图）          }）;      }
  };
}）;功能get_chart（）{
    返回{
       X轴：{
           类别：['扬'，'月'，'月'，'月'，'五一'，'君'，'月'，'月'，'月'，'月'，'月'，'月' ]
       }，       plotOptions：{
         系列：{
             光标：指示器，
             点：{
                 事件：{
                     点击：函数（）{
                         警报（'分类：'+ 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：

 ＆LT; D​​IV NG控制器=CTRL＆GT;
     ＆LT; highchart图='{{example_chart}}'＆GT;＆LT; / highchart＆GT;
  ＆LT; / DIV＆GT;
 

解决方案

只是做

 ＆LT; highchart图='example_chart'＆GT;＆LT; / highchart＆GT;
 

这将在对象传递插值字符串代替。

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.

这篇关于角JS - ＆QUOT;错误：[$插值：INTERR]不能插：＆QUOT;使用Highcharts时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！