如何在angularJS中使用$ document服务？

Question

我对JS中的angularJS很新,我对使用$ document感到有些困惑.根据我的理解,$ document公开了一些JQuery函数.所以,当我想删除匹配选择器的元素时,我这样做:

$document.remove('.someClassSelector');  

并且应该从DOM树中删除该元素,对吧？如果不是以角度操纵DOM元素及其css的正确方法是什么.

Answer 1

隐藏/显示DOM元素的更常见的"角度方式"是使用ngHide和/或ngShow指令 - 在HTML中"声明"它们(因此在Overview页面上显示此语句:

Angular是围绕这样一种信念而建立的,即在构建UI和将软件组件连接在一起时,声明性代码优于命令式

同样,要添加/删除CSS类,请以声明方式使用ngClass指令.对模型的更改(即$ scope属性)应该驱动隐藏/显示和添加/删除CSS类.

如果您需要更复杂的东西,请将DOM操作放入自定义指令中,通常在链接函数中.

在jQuery世界中,我们考虑触发DOM操作代码的事件(例如,对某个元素调用remove()).在AngularJS世界中,我们想要考虑触发模型更改的事件,然后根据我们的声明性HTML自动触发UI更改(例如,ng-click设置$ scope属性,该属性与元素上的ng-show相关联).我还在调整自己的想法.

对于大多数AngularJS应用程序,您不需要使用$ document.

Answer 2

AngularJS嵌入了精简版的Jquery（jqLit​​e）。

如果您只想使用jqLit​​e（不嵌入jquery），则可以执行以下操作删除元素：

angular.element(yourElement).remove()

$document 是window.document的jqLit​​e快捷方式

参见：docs.angularjs.org/api/angular.element