Question

我看过一些代码示例，其中$element is injected into an angular controller。我花了一些时间试图找到$元素的任何文档，但还没能找到任何angulars官方文档。

用于什么的$ element服务，何时应该使用它，以及围绕它使用的最佳实践是什么？

Answer 1

$element是一个jqlite（或jQuery，如果它可用）包装对象，包含对某些DOM对象的引用以及一些与它们交互的有用函数。每当您需要对DOM进行更改时，您都会使用$element。

例如......如果你需要在指令DOM对象中添加一个类，你可以注入$element并调用

$element.addClass("my-class")

您可以查看文档here

Answer 2

当您将$element注入控制器时，您将获得调用控制器的元素的JQlite包装版本。在指令控制器的情况下，它将是指令附加到的任何元素。我能找到的文档中唯一提到的是$compile description。

您可以在以下示例中看到：

＆＃13;

angular.module('myApp', [])
  .controller('testCtrl', function($scope, $element) {
    console.log($element);
  })
  .directive('testDirective', function() {
    return {
      controller: function($scope, $element) {
        console.log($element);
      }
    }
  })

＆＃13;

<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>

＆＃13;

最佳做法是除了指令之外不进行任何DOM更改，更具体地说，通常在链接函数中进行。在这种情况下，您几乎从不想在控制器中使用$element，因为这很可能意味着您正在从错误的角度接近解决方案。

Answer 3

实际上它不是服务，而是在指令中使用（链接函数中的第二个参数）。

Element是指令匹配的元素，是一个jqLite对象，意味着你可以对它执行类似jQuery的操作。

此外，您可以将此参数命名为"2015-12-18T17:04:27Z"或$element或您喜欢的任何内容。

您可以在官方文档中找到更多信息：

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

希望有所帮助

何时使用Angular的$元素

3 个答案: