javascript 何时使用 Angular 的 $element
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34360436/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When to use Angular's $element
提问by elliot-j
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.
我看过一些代码示例，其中$element 被注入到 angular controller 中。我花了一些时间试图找到 $element 的任何文档，但在 angulars 官方文档中找不到任何文档。
What is the $element service used for, when should I use it, and what are the best practices around it usage?
$element 服务用于什么，我应该在什么时候使用它，以及围绕它使用的最佳实践是什么？
采纳答案by Matthew Green
When you inject $elementinto 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.
当您注入$element控制器时，您将获得调用控制器的元素的 JQlite 包装版本。在指令控制器的情况下，它将是指令附加到的任何元素。我能找到的文档中唯一提到的是在$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 $elementin a controller because that most likely means you are approaching the solution from the wrong angle.
最佳实践是，除了在指令中，更具体地说，通常在链接函数中，您不要进行任何 DOM 更改。在这种情况下，您几乎不想$element在控制器中使用 ，因为这很可能意味着您从错误的角度接近解决方案。
回答by Marie
$elementis 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.
$element是一个 jqlite（或 jQuery，如果可用）包含对一些 DOM 对象的引用以及一些与它们交互的有用函数的包装对象。任何时候需要对 DOM 进行更改时，都可以使用$element.
For example... If you needed to add a class to a directives DOM object you would inject $elementand call
例如...如果您需要向指令 DOM 对象添加一个类，您将注入$element并调用
$element.addClass("my-class")
You can see the documentation here
您可以在此处查看文档
回答by georgeawg
I've spent some time trying to find any documentation for $element but havent been able to find any in angulars official docs.
我花了一些时间试图找到 $element 的任何文档，但在 angulars 官方文档中找不到任何文档。
$elementis one of four locals that $compileProvidergives to $controllerProviderwhich then gets given to $injector. The injector injects locals in your controller function only if asked.
$element是$compileProvider给予的四个当地人之一$controllerProvider，然后被给予$injector。仅当被要求时，注入器才会在您的控制器函数中注入局部变量。
The four locals are:
这四个本地人是：
$scope$element$attrs$transclude
$scope$element$attrs$transclude
The official documentation: AngularJS $compile Service API Reference - controller
官方文档：AngularJS $compile Service API Reference - 控制器
The source code from Github angular.js/compile.js:
来自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);
回答by Guido Kitzing
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.
Element 是指令匹配的元素，并且是一个 jqLite 对象，这意味着您可以对其执行类似 jQuery 的操作。
Also, you can name this parameter $elementor elementor anything you like.
另外，你能说出这个参数$element或者element你喜欢的或任何东西。
You will find more information in the official docs:
您将在官方文档中找到更多信息：
https://docs.angularjs.org/guide/directive
https://docs.angularjs.org/guide/directive
Hope that helps
希望有帮助
