All geek questions in one place

When to use an Angular $ element

I saw some code examples where the $ element is injected into the angular controller . I spent some time trying to find any documentation for $ element, but havent been able to find any in the official corners docs.

What is the $ element service used when should I use it, and what are the best methods to use it?

+5
source share
4 answers

When you enter $element into the controller, you get the complete version of the JQlite element from which the controller is called. In the case of a directory controller, this will be the element to which the directive is bound. The only mention in the docs I could find is the description of $ compile .

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 do not make any changes to the DOM except in the directive, and more specifically in the link functions. In this case, you almost never want to use $element in the controller, because this most likely means that you are approaching the solution from the wrong angle.

+2
source

$element is a jqlite (or jQuery, if available) a wrapped object containing a reference to some DOM objects, as well as some useful functions for interacting with them. Every time you need to make changes to the DOM, you must use $element .

For example ... If you need to add a class to the directives DOM object, you must enter $element and call

 $element.addClass("my-class")

You can see the documentation here.

+7
source

I spent some time trying to find any documentation for $ element, but havent been able to find any in the official corners docs.

$element is one of the four locales that $compileProvider gives $controllerProvider , which is then assigned to $injector . The injector introduces local residents into your controller function only if specified.

Four locals:

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

White papers: AngularJS $ compile Service API Reference - Controller

Download source package 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);
+1
source

This is actually not a service, but used in the directive (2nd argument in the link function).

An element is an element that corresponds to the directive and is a jqLite object, which means that you can perform operations on it like jQuery.

Alternatively, you can call this parameter $element or element or whatever.

You will find more detailed information in official documents:

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

Hope that helps

0
source

Source: https://habr.com/ru/post/1238653/

More articles:


All Articles