element.data('$injector') returns undefined when manually bootstrapped and directive is on the same element

[DrewML]

Howdy,

I discovered what I believe is an issue with the order of operations in which the $injector property is assigned to the top-level element in the application, which causes the reference to the $injector to be lost (preventing outside debugging tools from getting access).

In my application, I am manually bootstrapping. Additionally, I have a directive on the element I am passing into angular.bootstrap.

I believe the following lines are where the issue happens:

element.data('$injector', injector);
compile(element)(scope);

I believe that, immediately after the $injector is assigned to that DOM element, the compile() call is losing/dropping the reference in the .data() datastore. If I set a watch in Chrome's developer tools, I can see the object returned from .data() being wiped out half-way through the execution of the compile function.

This could be considered user error, but I didn't see any documentation specifying that this was an unacceptable use-case.

As a work-around, I have simply started passing the next parent element into angular.bootstrap, to prevent the compiling of the top-level directive from killing the reference I need to the injector.

[caitp]

I think the only cases this would happen is if:

1. your directive has a template and replace: true
2. your directive uses element transclusion

N'either of these cases should work for the $rootElement, which is expected to be static

[caitp]

also, if you want the injector, you can just inject $injector into your directive, which is totally fine (no need to get it from jQuery)

[DrewML]

also, if you want the injector, you can just inject $injector into your directive, which is totally fine (no need to get it from jQuery)

Ah, you know, I may have made the initial report confusing by referring to .data() rather than .injector(), which may have led you to believe this was something I was attempting to do within the app.

As a bit more background, this was actually an issue I was trying to debug to get my application working with the ng-inspector debugging tool. That extension relies on being able to access the application's injector, which was not available by calling angular.element(el).injector().

And I believe your number 2 above (uses element transclusion) is exactly my use-case. I'm actually using ui-router's ui-view directive on the element I'm passing into angular.bootstrap, which does rely on transclusion. I believe this would happen to anyone using ng-view with the ngRoute module as well.

Btw, thanks for the quick reply! Much appreciated.

[caitp]

for an explanation as to why it won't work with element transclusion, element transclusion will replace the element with a placeholder element (which happens to be a comment, and won't be able to get any of the original data) --- so, making those the root element will generally not work

[DrewML]

Thanks for the explanation -- that makes sense, and I'm assuming I'm probably a relatively small use-case. Besides that, it's not really crucial for me to be passing that specific element into bootstrap, as opposed to it's parent.

Do you think this is worth me submitting a PR for documentation/warnings about that for anyone who may hit that problem in the future? (and to be clear, documentation, not a fix, since this doesn't seem like something that really needs to be addressed).

[caitp]

I think it's a pretty low-impact thing, but it's always nice to send a PR if you want to do that. It's the holidays so don't worry too much about it =)

[DrewML]

Great. Thanks for the quick replies, and happy holidays.