Angular nvD3错误：指令nvd3的无效隔离范围定义 [英] Angular nvD3 Error: Invalid isolate scope definition for directive nvd3

问题描述

我正尝试同时使用 AngularJS，D3，NVD3 和 Angular-NVD3 。我在这里遵循快速指南： http://krispo.github.io/angular- nvd3 /＃/ quickstart 和饼图示例： https://github.com/krispo/angular-nvd3/blob/gh-pages/js/pieChart.js ，但这对我不起作用！我在控制台中收到此错误：

错误：

 错误：指令nvd3的无效隔离范围定义：=？错误时的
（本机）http：// localhost：3000 / assets / libs / angular / angular.min.js：43：202 
   
 
 
我一直在绞尽脑汁想弄清楚我在做什么错...这是我的代码：
 
 
 
  HTML / Jade： 
  div（ng-app ='myApp' ）
 div（ng-controller ='d3Dashboard'）
 nvd3（options ='options'，data ='data'）
  
 模块：
  angular.module（' myApp，[
'myApp.commonController'，
'myApp.filters'，
'myApp.services'，
'myApp.directives'，
'nvd3 '
]）; 
  
 控制器：
  angular.module（'myApp.commonController'，[]）。 
控制器（'d3Dashboard'，函数（$ scope）{
 $ scope.options = {
图表：{
类型：'pieChart'，
高度：500 ，
x：function（d）{return d.key;}，
y：function function（d）{return dy;}，
 showLabels：true，
 transitionDuration：500，
标签阈值：0.01，
图例：{
保证金：{
顶部：5，
右：35，
底部：5，
 ：0 
} 
} 
} 
}; 
 
 $ scope.data = [
 {
键： ，
y：5 
}，
 {
键： Two，
y：2 
}，
 {
关键：三e，
y：9 
}，
 {
键：四个，
y：7 
}，
 {
键：五个，
y：4 
}，
 {
键：六个，
y：3 
}，
 {
键： Seven，
y：.5 
} 
]; 
 
}）； 
  
看到我做错了什么吗？
 
 
 
我应该只使用 angularjs-nvd3-directives 代替 angular-nvd3 吗？
 
 
 
谢谢！
解决方案
 angular-nvd3库似乎正在使用将其某些范围属性设置为可选。 =？语法。这是在Angular 1.1.4（提交＃ac899d0 中添加的） 
 
 
 
因此，要使用angular-nvd3的最新版本，您将需要较新的Angular版本。 
 
I'm trying to use AngularJS, D3, NVD3, and Angular-NVD3 all together. I'm following the quick guide here: http://krispo.github.io/angular-nvd3/#/quickstart and the pie chart example here: https://github.com/krispo/angular-nvd3/blob/gh-pages/js/pieChart.js but it's just not working for me! I get this error in the console:

Error:
Error: Invalid isolate scope definition for directive nvd3: =?
    at Error (native)
    at http://localhost:3000/assets/libs/angular/angular.min.js:43:202
I've been racking my brain trying to figure out what I'm doing wrong here... Here's my code:

HTML / Jade:
div(ng-app='myApp')
    div(ng-controller='d3Dashboard')
        nvd3(options='options', data='data')
Module:
angular.module('myApp', [
  'myApp.commonController', 
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'nvd3'
]);
Controller:
angular.module('myApp.commonController', []).
  controller('d3Dashboard', function ($scope) {
        $scope.options = {
            chart: {
                type: 'pieChart',
                height: 500,
                x: function(d){return d.key;},
                y: function(d){return d.y;},
                showLabels: true,
                transitionDuration: 500,
                labelThreshold: 0.01,
                legend: {
                    margin: {
                        top: 5,
                        right: 35,
                        bottom: 5,
                        left: 0
                    }
                }
            }
        };

        $scope.data = [
            {
                key: "One",
                y: 5
            },
            {
                key: "Two",
                y: 2
            },
            {
                key: "Three",
                y: 9
            },
            {
                key: "Four",
                y: 7
            },
            {
                key: "Five",
                y: 4
            },
            {
                key: "Six",
                y: 3
            },
            {
                key: "Seven",
                y: .5
            }
        ];

    });
See anything I'm doing wrong?

Should I just use angularjs-nvd3-directives instead of angular-nvd3 ?

Thank you!
解决方案
The angular-nvd3 library appears to be setting a few of its scope properties as optional, using the =? syntax. This was added in Angular 1.1.4 (commit #ac899d0), and appears to be a breaking (non-backwards-compatible) change.

As such, in order to use recent versions of angular-nvd3, you will need a newer version of Angular.

                        
这篇关于Angular nvD3错误：指令nvd3的无效隔离范围定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！