Injecting $element into a Non-Directive Controller

[Josh David Miller]

Hello!

I'm sure everyone cringed when they read the headline to this post - and rightfully so! 

But I learned today that one can inject $element or $attrs into ANY controller. Here's a Plunker to demonstrate: http://plnkr.co/edit/Hxk8c7?p=preview.

The problem is that I can't come up with any "legitimate" use case for this. It seems to me fundamentally wrong.

Enlighten me! What's a use case that won't make me cringe?

Josh

[Clint Checketts]

I thought I saw a post by Pete showing that is used for controllers of directives. From the wording I'd assumed that was the only legitimate use case.

I'd cringe in it was used on a plain controller. (Though an ng-include with a controller using this technique could be a 'poor man's directive', but I would cringe at that too.)

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Mike McElroy]

Theoretically, I could alter the behavior of the controller based on attributes I define on the DOM element that has ng-controller, allowing the controller to be more flexible and your syntax to be more declarative?  I can't immediately think of a reason for $element.  It may just be a side effect of the $elementProvider existing for the sake of directive controllers.

BTW, I'm annotating and making chapter markers for the video from last night.  It should be pretty comprehensive by the time I get through.

-MikeMac

[Josh David Miller]

@Mike - But then you could just use a directive. But that led me to the some more info.

I figured out why it's available here. If you use routing, it's not available. And this is, I think, just a side effect of how ngController works:

var ngControllerDirective = [function() {

  return {

    scope: true,

    controller: '@'

  };


}];

So your "typical" controller in fact IS a directive controller! So the injectable locals just happen to be available to any controller using ngController. But it's NOT available using a route because ngView uses a more "normal" controller instantiation: https://github.com/angular/angular.js/blob/master/src/ng/directive/ngView.js#L149. There was an error in Greg's plunker that I posted initially. Here's it fixed: http://plnkr.co/edit/o69q2k?p=preview. Whip open the console and you'll see the expected "Unknown provider" error.

So I'll make my question more specific: is having $element available just an ignorable side effect of how ngController works or is there an intended use case for injecting $element into a "typical" controller?

Josh

--

[Peter Bacon Darwin]

I would go so far as to say it was an unintended ignorable side effect!

[Josh David Miller]

Would something like this work equally well? 

return {

  scope: true,

  link: function ( scope, element, attrs ) {

    var controller = $controller(attrs.ngController, scope);

    element.children().data('$ngControllerController', controller);

  }

};

There are questions all the time from people trying to inject $element into controllers; being able to say "if it's not a directive, then you can't" would be helpful but also it would prevent a lot of the questions that come up because someone already injected it. Lastly, there's a lot of confusion in general on the difference between a "directive controller" and a "normal controller" and this would help solidify it.

Josh