【问题标题】:Angular nvD3 Error: Invalid isolate scope definition for directive nvd3 [duplicate]Angular nvD3错误:指令nvd3的隔离范围定义无效[重复]
【发布时间】:2015-05-15 23:33:00
【问题描述】:

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

错误

Error: Invalid isolate scope definition for directive nvd3: =?
    at Error (native)
    at 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', []).
  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
            }
        ];

    });

看到我做错了什么吗?

我应该只使用angularjs-nvd3-directives 而不是angular-nvd3 吗?

谢谢!

【问题讨论】:

  • 你能创建一个能重现这个问题的 plunker 吗?
  • 我猜你使用的是相当老的 Angular 版本,1.1.4 之前的版本?
  • @DRobinson 哦,好吧,这很有道理!我会更新的
  • @Kayvar,我遇到了同样的问题,但我使用的是新的 angularjs,AngularJS v1.6.7 - 你是如何解决这个问题的?

标签: angularjs d3.js nvd3.js angular-nvd3


【解决方案1】:

angular-nvd3 库似乎使用=? 语法将其一些范围属性设置为可选。这是在 Angular 1.1.4 (commit #ac899d0) 中添加的,似乎是一项重大(非向后兼容)更改。

因此,为了使用最新版本的 angular-nvd3,您需要更新版本的 Angular。

【讨论】:

    猜你喜欢
    • 2016-11-30
    • 1970-01-01
    • 2015-05-14
    • 2014-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多