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)。但是这些依赖关系并没有得到处理。

当前解决方法

为了解决这个问题，我显式地安装了d3和nvd3，并在我的超文本标记语言中对它们进行了<script> ;(但这正好违背了我的目的。

Answer 1

我找到了一个更好的方法。添加

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

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

然后，我只是以通常的方式Browserify (在我的情况下是吞咽)。