How to reference values with the same name from different modules

Question

If I have some modules which defines the same value object:

var m1 = angular.module('m1', []);
m1.value('test', 'AAA');

var m2 = angular.module('m2', []);
m2.value('test', 'BBB');

Notice m1 and m2 both have the same value test.

Then in the main module, I depend on them two:

var app = angular.module('angularjs-starter', ['m1','m2']);

app.controller('MainCtrl', function($scope, test) {
  $scope.test = test;
});

And the HTML is very simple:

<body ng-controller="MainCtrl">
 [{{test}}]
</body>

It will show[BBB] in the final page. I can see that the value test of m1 has been overrode by the one of m2.

You can see a live demo here: http://plnkr.co/edit/u7u8p0nYqq9CvNxWKv5G?p=preview

Is there any way to show the values of test both from m1 and m2 in the same page?

possible duplicate of [Modules and name clashes in Angularjs](http://stackoverflow.com/questions/13406791/modules-and-name-clashes-in-angularjs) — shannon, Jun 02 '15 at 09:04

score 12 · Accepted Answer · answered Mar 11 '13 at 15:55

12

In short - no. AngularJS modules form one namespace. If you define 2 values with the same name on 2 different modules only one will be visible during runtime. This applies to any providers, not only values.

This might get addressed in future versions of AngularJS but for now your best option is to prefix your values (and other providers) with a module name.

answered Mar 11 '13 at 15:55

pkozlowski.opensource

117,202
60
326
286

@Freewind I'm afraid that there is no other option at the moment. – pkozlowski.opensource Mar 11 '13 at 16:04

score 0 · Answer 2 · answered Apr 16 '15 at 10:46

Actually, you can (sort of) do this, but it requires a bit more manual work. See this plunkr.

var foo = angular.module('foo', ['ng']).value('test', 1);
var bar = angular.module('bar', ['foo']).value('test', 2);
console.log(angular.injector(['foo']).get('test')); // 1
bar.service('original', ['test', function(test) {
    console.log(test); // 2
}]);

As the other answers stated, the module namespace is global so the controller in 'foo' gets the Test value from 'bar'. However, by using angular.injector([...modules]) we can explicitly retrieve values/services/whatnot from certain modules.

Of course this doesn't natively work with Angular's DI system, but personally that doesn't really bother me since function(Foo) {} or function() { Foo = angular.injector(['myModule']).get('Foo'); } is slightly more typing, but not necessarily worse (we're still injecting something, only manually).

Also, directives and filters would need to be made unique in another way, but it gives a starting point.

How to reference values with the same name from different modules

2 Answers2

Linked