Я видел несколько примеров кода, где элемент $ вводится в угловой контроллер, Я потратил некоторое время, пытаясь найти какую-либо документацию для $ element, но не смог найти ни одной в официальных документах angulars.

Для чего нужен сервис $ element, когда я должен его использовать и каковы лучшие практики его использования?

7
elliot-j 18 Дек 2015 в 19:59

4 ответа

Лучший ответ

Когда вы вставляете $element в контроллер, вы получаете упакованную в JQlite версию элемента, из которого вызывается контроллер. В случае контроллера директивы это будет любой элемент, к которому присоединена директива. Единственное упоминание в документах, которое я смог найти, было в $ compile description .

Вы можете увидеть это в следующем примере:

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>

Лучше всего, чтобы вы не вносили никаких изменений в DOM, за исключением директивы и, более конкретно, обычно в функции ссылки. В этом случае вы почти никогда не захотите использовать $element в контроллере, потому что это, скорее всего, означает, что вы подходите к решению под неправильным углом.

3
Matthew Green 18 Дек 2015 в 17:19

Я потратил некоторое время, пытаясь найти какую-либо документацию для $ element, но не смог найти ее в официальных документах angularjs.

$element является одним из четырех локальных объектов, которые $compileProvider передает $controllerProvider, которые затем передаются $injector. Инжектор вводит местных жителей в функции вашего контроллера только по запросу.

Четыре местных жителя:

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

Официальная документация: Справочник по API-сервису компиляции AngularJS $ - контроллер

Исходный код от 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
georgeawg 21 Дек 2015 в 01:12

$element - это обернутый объект jqlite (или jQuery, если он доступен), содержащий ссылку на некоторые объекты DOM, а также некоторые полезные функции для взаимодействия с ними. Каждый раз, когда вам нужно внести изменения в DOM, вы должны использовать $element.

Например ... Если вам нужно добавить класс в DOM-объект директивы, вы должны вставить $element и вызвать

$element.addClass("my-class")

Вы можете ознакомиться с документацией здесь.

9
Marie 18 Дек 2015 в 17:03

На самом деле это не служба, а используется в директиве (2-й аргумент в функции-ссылки).

Элемент - это элемент, которому соответствует директива и который является объектом jqLite, означает, что вы можете выполнять над ним jQuery-подобные операции.

Также вы можете назвать этот параметр $element или element или как угодно.

Вы найдете больше информации в официальных документах:

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

Надеюсь, это поможет

0
Guido Kitzing 18 Дек 2015 в 17:05