问题描述
在 AngularJS 中，我注意到控制器注入了 $element，它是控制器控制的元素的 JQuery/JQLite 包装器.例如:
In AngularJS, I've noticed that a controller is injected with $element, which is a JQuery/JQLite wrapper of the element the controller is controlling. For example:
<body ng-controller="MainCtrl">
然后你可以通过注入$element
app.controller('MainCtrl', function($scope, $element) { ...
这可以在 this Plunkr 上看到.
This can be seen working at this Plunkr.
并且似乎在 $compile 文档 中被确认为一个故意的功能
And seems to be confirmed as a deliberate feature in the docs for $compile
我的问题是:
鉴于各种指南和教程都建议您不应在控制器中访问 DOM，为什么这可能呢?
In the light of the various guides and tutorials that suggest you shouldn't access the DOM in a controller, why is this even possible?
是否有任何非黑客用例?
Is there any non-hacky use case for this?
是否有在某处可用代码中使用的示例?
Are there any examples of this being used in available code somewhere?
谢谢.
推荐答案
快速总结
一个可扩展和/或与其他指令交互的编写良好的指令将有一个控制器.该控制器需要访问 DOM，因为它是定义该指令功能的地方.指令实际上是一种将控制器/范围绑定到页面元素的不同方式；向 DOM 添加功能的首选方式.据我了解，最佳做法是:不要同时使用控制器和链接功能.所以指令控制器需要一个 $element.
鉴于各种指南和教程建议您不应在控制器中访问 DOM，为什么这甚至可能?
一旦您深入了解它的工作原理，这些指南就会有点误导.
The guides are a little misleading once you dig into how it all works.
控制器处理定义函数并分配视图使用的变量.将这些函数和变量绑定到视图的正确方法是使用指令.这是我对最佳实践的理解，过去一年我一直在处理大型且不断增长的 Angular 应用程序.
Controllers handle defining functions and assign variables to be used by the view. And the right way to bind those functions and variables to the view is with a directive. That is my understanding of best practices, having worked with large and growing angular applications for the past year.
棘手的是，该指令基本上将控制器绑定到 DOM.ng-model 是一个指令，并且有一个可以从其他指令访问的控制器.如果您执行诸如添加自定义验证幻想之类的操作，您将希望利用这一点.该指令的控制器应该操作 DOM.所以一个通用控制器实际上是一个视图控制器的超级集合；教程通常会忽略的一个细节.
The tricky thing is that the directive basically binds a controller to the DOM. ng-model is a directive and has a controller that can be accessed from other directives. You will want to take advantage of this if you do things like add custom validation fanciness. This controller of the directive is supposed to manipulate the DOM. So a generic controller is actually is a super set of view controllers; a detail that the tutorials usually glaze over.
是否有任何非黑客用例?
'正确'使用$element的方法:
例如在指令的控制器中使用它.
'correct' ways of using $element:
Using it in a directive's controller for example.
是否有任何示例在某处可用代码中使用?
示例:
Angular 源代码，虽然读起来可能有点密集，但代码很好，注释也很好.可能需要一点时间才能看到正在发生的事情，但通常信息量很大.
Examples:
Angular source code, though perhaps a little dense of a read, is good code and well commented. It may take a little bit to see what's going on, but usually quite informative.
NgModelController(复杂的例子)https://github.com/angular/angular.js/blob/master/src/ng/directive/input.jshttps://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1660
NgModelController (complex example)https://github.com/angular/angular.js/blob/master/src/ng/directive/input.jshttps://github.com/angular/angular.js/blob/master/src/ng/directive/input.js#L1660
什么可能是一个简单的例子，但使用编译函数代替，eventDirectives(例如ng-click)，https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js#L3
What could be a simple example, but uses a compile function instead, the eventDirectives (ng-click for example),https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js#L3
这篇关于为什么 $element 可用/注入控制器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！