angularjs – 为什么$element可用/注入控制器?

前端之家收集整理的这篇文章主要介绍了angularjs – 为什么$element可用/注入控制器?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在AngularJS中,我注意到控制器注入了$element,它是控制器控制的元素的JQuery / JQLite包装器.例如:
<body ng-controller="MainCtrl">

然后,您可以通过注入$element来访问控制器中的body元素

app.controller('MainCtrl',function($scope,$element) { ...

这可以在this Plunkr工作.

并且似乎被确认为docs for $compile中的故意特征

我的问题是:

>根据各种指南和教程,建议您不要在控制器中访问DOM,为什么这甚至可能?
>这是否有任何非hacky用例?
>在某处可用代码中是否有任何示例?

谢谢.

快速摘要

一个可扩展和/或与其他指令交互的编写良好的指令将具有一个控制器.该控制器需要访问DOM,因为它是定义该指令的功能的地方.指令实际上是将控制器/范围绑定到页面上元素的不同方式;向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?

一旦你深入了解它的工作原理,这些指南就会有一点误导.

导游说:

控制器处理定义函数并分配视图使用的变量.将这些函数和变量绑定到视图的正确方法是使用指令.这是我对最佳实践的理解,在过去一年中与大型和不断增长的角度应用程序一起工作.

为什么令人困惑:

棘手的是该指令基本上将控制器绑定到DOM. ng-model是一个指令,有一个可以从其他指令访问的控制器.如果您执行添加自定义验证功能等操作,则需要利用此功能.该指令的该控制器应该操纵DOM.因此,通用控制器实际上是一组超级视图控制器;教程通常会釉面的细节.

Is there any non-hacky use case for this?

‘正确’使用$元素的方法

例如,在指令的控制器中使用它.

Are there any examples of this being used in available code somewhere?

例子:

Angular源代码虽然可能有点密集,但是很好的代码和良好的评论.可能需要一点点才能看到发生了什么,但通常信息量很大.

NgModelController(复杂的例子)
https://github.com/angular/angular.js/blob/master/src/ng/directive/input.js
https://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

猜你在找的Angularjs相关文章