使用 angular-nvd3 以角度渲染 d3 饼图

Question

https://plnkr.co/edit/vE5Km2?p=preview

我想用 angular-nvd3 以角度呈现 d3 饼图。我没有错误，所有相关的脚本都在加载。

我不确定如何调用指令内的函数—— 提供的指令是：

<nvd3 options='options' data='data'></nvd3> 

我改成了：

<nvd3 options='vm.options' data='vm.data'></nvd3>

HTML：

  <div ng-controller='MainController'>
    <nvd3 options='vm.options' data='vm.data'></nvd3>
  </div>

ma​​in.controller：

(function (angular) {
    'use strict';
    angular
        .module('blah').controller('MainController', MainController);

    function MainController () {
        var vm = this;

        vm.initSampleData = initSampleData; // set up the var

        function initSampleData() {
            vm.options = {
                'chart': {
                    'type': 'pieChart',
                    'height': 500,
                    'showLabels': true,
                    'duration': 500,
                    'labelThreshold': 0.01,
                    'labelSunbeamLayout': true,
                    'legend': {
                        'margin': {
                            'top': 5,
                            'right': 35,
                            'bottom': 5,
                            'left': 0
                        }
                    }
                }
            };

            vm.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}
            ];
        }
    }

})(window.angular);

如果我添加路线（不使用指令，为 Angular 2.0 做好准备） MainRoute.$inject = ['$routeProvider', 'nvd3'];它错误...

function MainRoute($routeProvider){
        $routeProvider.when('/', {
            controller: 'MainController as vm',
            templateUrl : 'main.html',
            bindToController: false
        });
    }

Answer 1

我认为你需要为你的控制器创建一个别名，它会解决你的问题。

<div ng-controller='MainController as vm'>

您将data 分配给控制器对象，但在视图中，在您给控制器别名之前，它可以用自己的名称调用，所以在添加别名之前它是MainController.data，在添加它之后就像我提到的在它之前 - vm.data。

希望对你有帮助

已编辑

这里是Plunker 和工作代码。你的问题是：

• 您没有使用ng-app="yourModule" 初始化角度模块
• 您插入了路由，但没有使用<ui-view> 让他们知道应该在哪里使用它