angular-nvd3和Browserify

Question

如何使angular-nvd3与Browserify配合使用？ 我通过npm install angular-nvd3然后使用以下命令创建我的模块。

require('angular').module('myApp', [require('angular-nvd3')]);

我的控制器看起来像

require('angular')
  .module('myApp')
  .controller('MyCtrl', function() {
    var ctrl = this;

    ctrl.nvd3Options = {
        chart: {
            type: 'discreteBarChart',
            height: 450,
            margin : {
                top: 20,
                right: 20,
                bottom: 60,
                left: 55
            },
            // ...other options from demo...
        }
    };

    ctrl.nvd3Data = [{
        key: "Cumulative Return",
        values: [
            { "label" : "A" , "value" : -29.765957771107 },
            // ...other data from demo...
        ]
    }];
  });

我的HTML看起来像

<div ng-app="myApp" ng-controller="MyCtrl as ctrl">
  <nvd3 options='ctrl.nvd3Options' data='ctrl.nvd3Data'></nvd3>
</div>

但我收到错误ReferenceError: nv is not defined @ angular-nvd3.js：250 （使用v1.0.5 ）。

我认为安装并要求angular-nvd3可以处理所有依赖项（即nvd3和d3）。 但是这些依赖关系没有得到处理。

当前解决方法

为了解决这个问题，我在我的HTML中明确安装了d3和nvd3以及<script> ；（但这只是违背了目的。

Answer 1

我找到了更好的方法。 加

global.d3 = require('d3'); // nvd3 assumes that d3 is global
require('nvd3');

无论您在何处定义模块，并确保将这些包添加到package.json依赖项中 。

然后，我以通常的方式只是Browserify（以我的情况为准）。