javascript 如何在 angularJS 中使用 $document 服务?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13265578/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 18:15:45  来源:igfitidea点击:

How to use $document service in angularJS?

javascriptjqueryangularjs

提问by Adelin

I am very new to angularJS in JS in general and I am a bit confused about using $document. According to what I understood $document exposes some JQuery functions. So, when I want to remove an element matching a selector I do this :

一般来说,我对 JS 中的 angularJS 很陌生,我对使用 $document 有点困惑。据我了解 $document 公开了一些 JQuery 函数。因此,当我想删除与选择器匹配的元素时,我会这样做:

$document.remove('.someClassSelector');  

and the element should be removed from the DOM tree, right ? If not what is the correct way to manipulate DOM elements and their css in angular.

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

采纳答案by Florian F

AngularJS embed a lite version of Jquery (jqLite).

AngularJS 嵌入了一个精简版的 Jquery (jqLit​​e)。

If you want to use jqLite only (without embedding jquery), you can do the following to remove the element :

如果您只想使用 jqLit​​e(不嵌入 jquery),您可以执行以下操作来删除元素:

angular.element(yourElement).remove()

$documentis a jqLite shortcut to window.document

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

See : docs.angularjs.org/api/angular.element

请参阅:docs.angularjs.org/api/angular.element

回答by Mark Rajcok

The more common "angular way" of hiding/showing DOM elements is to use the ngHideand/or ngShowdirectives -- "declare" them in your HTML (hence this statement on the Overviewpage:

隐藏/显示 DOM 元素的更常见的“角度方式”是使用ngHide和/或ngShow指令——在你的 HTML 中“声明”它们(因此在概览页面上有这个声明:

Angular is built around the belief that declarative code is better than imperative when it comes to building UIs and wiring software components together

Angular 建立在这样一种信念之上:在构建 UI 和将软件组件连接在一起时,声明式代码优于命令式

Similarly, to add/remove CSS classes, use the ngClassdirective in a declarative manner. Changes to your models (i.e., $scope properties) should drive the hiding/showing and the addition/removal of CSS classes.

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

If you need something more complicated, put DOM manipulation into custom directives, normally in the link function.

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

In a jQuery world, we think about events triggering DOM manipulation code (e.g., call remove() on some element). In an AngularJS world, we want to think about events triggering model changes, which then trigger UI changes automatically, based on our declarative HTML (e.g., an ng-click sets a $scope property which is tied to an ng-show on an element). I'm still adjusting my thinking.

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

For most AngularJS applications, you won't need to use $document.

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