javascript - 防止第三方工厂干扰我的应用程序的同名工厂

Question

我正在使用 angular-bootstrap-colorpicker在我的应用程序中遇到了一个奇怪的问题。颜色选择器模块有一个名为 Slider 的工厂。这导致颜色选择器无法工作，因为我的应用程序还有一个名为 Slider 的工厂。在应用程序中重构每次出现的这种情况是不可能的，而且无论如何这似乎是一个草率的解决方法。抛出的错误是

Uncaught TypeError: Slider.setSaturation is not a function

我得出的结论是因为我的应用程序工厂没有方法 setSaturation 并且 Angular 很“困惑”。我真的不太了解工厂以及 Angular 如何组织它们，但像那样跨模块使用它们似乎很奇怪。例如

angular.module('thomasApp', [])
...
.factory('Slider', ...

受到影响

angular.module('colorpicker.module', [])
...
.factory('Slider', ...

反之亦然。

有什么办法可以将这个颜色选择器分隔开，这样它就不会干扰我的 Slider 工厂吗？

编辑:

我同意链接的答案，即使用前缀作为命名空间是一个聪明的主意。然而，这将需要不切实际的重构量。我很欣赏下面的答案，但它不够充实，我无法付诸行动。

1) 这真的是最好的解决方案吗(除了从项目开始就加上前缀)？ - 如果我进行这样的更改，下次我更新 Bower 时它会被删除，还是有人撤下我的项目并安装 Bower？

2) 有更好的方法吗？ - 如果没有，是否可以扩展当前答案并添加对正在发生的事情的解释？

Answer 1

您遇到的问题是 Angular 中普遍已知的问题。 @fracz 是对的，它与 Modules and namespace / name collision in AngularJS 有关.问题是 Angular 每个模块实例化只有一个 $injector 实例，所有定义的可注入(inject)对象都会进入它。我所说的可注入(inject)对象是指常量、值、服务、 Controller 、指令。这在这种情况下很糟糕，因为即使我们通过定义多个模块和它们之间的依赖关系来模块化我们的应用程序，所有定义的可注入(inject)对象最终都会在相同的上下文/命名空间/注入(inject)器。

Angular 不使用 fail-fast 使情况变得更糟在这种情况下使用技术，并且由于应用程序继续运行，您最终可能会晚些时候注意到问题，这通常会导致代价高昂的重构。还有一个问题是我们如何改进它，IMO 快速失败至少有助于在开始时避免这个问题。

但是在您的情况下，您很幸运，库真的很小，您只需要颜色选择器指令。我做了一个解决方法示例 here通过在模块中定义颜色选择器指令，同时从实例化的库模块 $injector 中获取它的定义。像这样，您甚至可以自由更改它的名称 :)。

代码示例:

// NOTE: redefine the directive
app.directive('colorpicker', function () {
  var injector = angular.injector(['ng', 'colorpicker.module']);
  return injector.get('colorpickerDirective')[0];
});

为了清楚起见，还有一个示例展示了当您定义两个具有相同名称的服务时 Angular 的行为方式。应用程序成功地继续使用上一个服务定义。

我希望这个答案能让事情变得清晰并成功解决您的问题。如果您有更多问题，请随时提问。干杯!