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 $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.
当您注入$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 $element
in a controller because that most likely means you are approaching the solution from the wrong angle.
最佳实践是,除了在指令中,更具体地说,通常在链接函数中,您不要进行任何 DOM 更改。在这种情况下,您几乎不想$element
在控制器中使用 ,因为这很可能意味着您从错误的角度接近解决方案。
回答by Marie
$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
.
$element
是一个 jqlite(或 jQuery,如果可用)包含对一些 DOM 对象的引用以及一些与它们交互的有用函数的包装对象。任何时候需要对 DOM 进行更改时,都可以使用$element
.
For example... If you needed to add a class to a directives DOM object you would inject $element
and 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 官方文档中找不到任何文档。
$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.
$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 $element
or element
or 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
希望有帮助