10

I've seen a few code examples where where $element is injected into an angular controller. I've spent some time trying to find any documentation for $element but havent been able to find any in angulars official docs.

What is the $element service used for, when should I use it, and what are the best practices around it usage?

Community
  • 1
  • 1
elliot-j
  • 10,709
  • 3
  • 19
  • 18

4 Answers4

10

$element is a jqlite (or jQuery if it is available) wrapped object containing a reference to some DOM objects as well as some helpful functions to interact with them. Any time you need to make changes to the DOM you would use $element.

For example... If you needed to add a class to a directives DOM object you would inject $element and call

$element.addClass("my-class")

You can see the documentation here

Marie
  • 2,114
  • 1
  • 17
  • 31
6

When you inject $element into a controller you get a JQlite wrapped version of the element that the controller is called from. In the case of a directive controller, it would be whatever element the directive is attached to. The only mention in the docs I could find was under the $compile description.

You can see that in the following example:

angular.module('myApp', [])
  .controller('testCtrl', function($scope, $element) {
    console.log($element);
  })
  .directive('testDirective', function() {
    return {
      controller: function($scope, $element) {
        console.log($element);
      }
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="testCtrl" id="controller">Controller</div>
  <div test-directive id="directive">Directive</div>
</body>

The best practice is that you don't make any DOM changes except for in a directive and even more specifically typically in the link function. That being the case you almost never want to use the $element in a controller because that most likely means you are approaching the solution from the wrong angle.

Matthew Green
  • 10,161
  • 4
  • 36
  • 54
2

I've spent some time trying to find any documentation for $element but havent been able to find any in angulars official docs.

$element is one of four locals that $compileProvider gives to $controllerProvider which then gets given to $injector. The injector injects locals in your controller function only if asked.

The four locals are:

  • $scope
  • $element
  • $attrs
  • $transclude

The official documentation: AngularJS $compile Service API Reference - controller

The source code from Github angular.js/compile.js: 

 function setupControllers($element, attrs, transcludeFn, controllerDirectives, isolateScope, scope) {
    var elementControllers = createMap();
    for (var controllerKey in controllerDirectives) {
      var directive = controllerDirectives[controllerKey];
      var locals = {
        $scope: directive === newIsolateScopeDirective || directive.$$isolateScope ? isolateScope : scope,
        $element: $element,
        $attrs: attrs,
        $transclude: transcludeFn
      };

      var controller = directive.controller;
      if (controller == '@') {
        controller = attrs[directive.name];
      }

      var controllerInstance = $controller(controller, locals, true, directive.controllerAs);
georgeawg
  • 48,608
  • 13
  • 72
  • 95
0

Actually it is not a service, but is used in a directive (2nd argument in link-function).

Element is the element, that the directive matches and is a jqLite object, means you can perform jQuery-like operations on it.

Also, you can name this parameter $element or element or anything you like.

You will find more information in the official docs:

https://docs.angularjs.org/guide/directive

Hope that helps

Guido Kitzing
  • 892
  • 5
  • 14