AngularJS：使用在控制器/指令中其他地方定义的自定义 javascript 函数答案

【问题标题】：AngularJS: Using a custom javascript function defined elsewhere in controller/directiveAngularJS：使用在控制器/指令中其他地方定义的自定义 javascript 函数
【发布时间】：2026-01-17 05:25:01
【问题描述】：

所以，我有一个 javascript 文件（一种库，仍在使用）“linechart.js”，它包含一个对象，该对象又包含一个函数，该函数将一些数据作为输入并使用 D3 生成折线图。代码如下：

linechart.js

var lineobj = {
   plotFunc : function(data) {
        //generate line chart using the data argument
   }
}

传递给上述对象的数据实际上是在一个angularjs控制器中生成的，如下所示：

index.controller.js：

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.generateData = function(){
        //generate data for the line chart
    }
}])

现在，我面临的问题是方法问题。

这是我的疑问：

1. 将数据传递给 linechart.js 以便它可以生成线图的最佳方式是什么。

2.我应该使用指令并调用函数'plotFunc'来生成折线图吗？如果是这样，我该如何调用该函数？

3. 我应该在控制器本身中调用该函数吗？如果是这样，我该如何调用该函数？

4.还有其他更好的方法我没有提到吗？

【问题讨论】：

如果你把你的库变成一个 Angular 模块，你可以使用 Angular 的 DI 机制来获取它的引用，即。将其标记为应用程序的依赖项，并将其注入控制器。
谢谢。有没有其他方法可以让我不必碰我的图书馆？

标签： javascript angularjs d3.js angular-directive

【解决方案1】：

最好的方法实际上是生成一个包装 D3 的服务，在你的控制器中要求它，然后你可以调用这些方法。有一些很好的图表库已经像 nvd3 一样包装了 D3，否则请查看这个链接，它很好地解释了如何用 Angular.js 包装 D3

http://www.ng-newsletter.com/posts/d3-on-angular.html

【讨论】：