AngularJS module dependency injection sharing its dependencies with parent module

Question

I have an AngularJS module:

angular.module("app", ['ui.bootstrap', 'ngRoute', 'ngGridPanel']).config(function($routeProvider) {

As you can see it has ngGridPanel included via dependency injection.

Here is the definition of ngGridPanel's module/directive:

angular.module('ngGridPanel', ['ngAnimate']).directive('gridPanel', ['$animate', '$compile', '$window', '$document', '$timeout', function ($animate, $compile, $window, $document, $timeout) {

As you can see, it refers to ngAnimate.

The problem I am having is that once I inject ngGridPanel into my app, every element in my app is suddenly attempting to be animated.

Now, as described in this Angular.js GitHub issue, ngAnimate will assume everything should be animated. Once I realized this is the expected behaviour, I realized that I never included ngAnimate into my app module in the first place.

So why would it be affecting my entire application? Shouldn't it only take effect in the directive that belongs to the ngGridPanel module?

So how is ngAnimate affecting the parent module scope? Is this normal?

Side-note: At this point I haven't even utilized the ngGridPanel directive at all. I have merely injected it into my app.

Side-note 2: Once I implemented a class name filter ($animateProvider.classNameFilter(/enable-animate/);) in my app, animations stopped on all my elements but remained working in the ngGridPanel directive without having to add the enable-animate class anywhere.

short answer is dependencies of module dependencies are available throughout the app as you are witnessing — charlietfl
– charlietfl, Commented Jul 16, 2015 at 15:26

shieldstroy · Accepted Answer · 2015-07-16 15:38:25Z

1

If you depend on ngGridPanel and ngGridPanel depends on ngAnimate, then you depend on ngAnimate as well.

It is the exact same to you as if you had defined your app with angular.module("app", ['ui.bootstrap', 'ngRoute', 'ngGridPanel', 'ngAnimate']).

As for your Side-note 2, it seems likely that they have configured it to use something like .classNameFilter() as well so that animations wouldn't break if the user of their library decided to configure it differently, such as you did. I don't know too much about ngAnimate so that's just a hunch.

answered Jul 16, 2015 at 15:38

shieldstroy

1,3271 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

raffi Over a year ago

Thanks, I guess it is normal behaviour then. In regards to the .classNameFilter(), I checked and the library does not use it. It is probably only affecting my app and not ngGridPanel because I am applying it in my app config, and that probably doesn't impact dependencies?

shieldstroy Over a year ago

Interesting. I wouldn't think that would be possible since once you are using it it's hard for angular to know what's a third-party dependency vs. what's your own modules, but I definitely could be wrong.

Collectives™ on Stack Overflow

AngularJS module dependency injection sharing its dependencies with parent module

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related