Angular nvD3 Error: Invalid isolate scope definition for directive nvd3 [duplicate]

问题

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!

回答1:

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.

来源：https://stackoverflow.com/questions/30270198/angular-nvd3-error-invalid-isolate-scope-definition-for-directive-nvd3

标签

angularjs

d3.js

nvd3.js

angular-nvd3