防止第三方工厂使用相同名称干扰我的应用程序工厂

Question

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

未捕获的TypeError:Slider.setSaturation不是函数

我得出的结论是因为我的应用程序的工厂没有方法setSaturation而Angular被"混淆"了.我对工厂以及Angular如何组织它们并不是很了解,但似乎很奇怪它们可以在这样的模块之间使用.例如

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

受到影响

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

或相反亦然.

有没有我可以划分这个颜色选择器,以便它不会干扰我的Slider工厂？

编辑:

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

1)这真的是最好的解决方案(除了项目开头的前缀)吗？ - 如果我做这样的改变,下次我做凉亭更新时会删除它,还是有人拉下我的项目并安装了凉亭？

2)有更好的方法吗？ - 如果没有,是否可以扩展当前的答案并解释发生了什么？

Answer 1

您遇到的问题是Angular中一般已知的问题.@fracz是对的,它与AngularJS中的模块和命名空间/名称冲突相关联.问题是Angular每个模块实例化只有一个$ injector实例,所有定义的可注入对象都进入它.通过可注入的对象,我指的是常量,值,服务,控制器,指令.在这种情况下这很糟糕,因为即使我们通过在最后定义多个模块和它们之间的依赖关系来模块化我们的应用程序,所有定义的可注入对象最终都会相同的上下文/命名空间/注入器.

Angular通过在这种情况下不使用故障快速技术使情况变得更糟,并且因为应用程序继续工作,您最终可能会注意到问题,这通常会导致昂贵的重构.还有一个问题是我们如何能够改善这一点,IMO失败 - 至少有助于避免这个问题的开始.

但是在你的情况下,你很幸运,库很小,你需要的只是颜色选择器指令.我在这里通过在模块中定义颜色选择器指令同时从实例化的库模块$ injector中定义颜色选择器指令来制作一个解决方法示例.像这样,你可以自由改变它的名字:).

代码示例:

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

为了便于说明,还有一个示例显示了在定义具有相同名称的两个服务时Angular的行为方式.应用程序成功继续使用上一个服务定义.

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

Answer 2

也许是这样的 - 创建一个假模块并用新名称包装现有的提供者.这将隔离依赖性.

var colorpicker = angular.module('my-colorpicker', ['colorpicker.module']);
colorpicker.factory('ColorPickerSlider', function() {
  var injector = angular.injector(['colorpicker.module']);
  var Slider = injector.get('Slider');
  return Slider;
});

我知道这并不能解决名称空间的基本问题,但它提供了一种隐藏沙箱中现有依赖项的方法.