angular.element().hide()与ngIf的区别

Question

Angular提供了一些jquery函数这里 我想知道使用.hide()和ngIf指令之间是否存在性能差异? 根据评论添加了澄清 我理解ngIf和ngShow之间的区别，但我想知道使用ng指令与调用angular.element()并与.hide()链接起来的性能差异

- Kraken

Answer 1

hide/show 不会将元素从 DOM 中移除，只是添加了 display:none 属性，而 ng-if 会完全从 DOM 中删除该元素。

如果您的 UI 元素很多，可以使用 ng-if 实例化相关元素，这样可以节省大量资源。因为您的视图不需要创建所有元素，然后将应该不显示在视图中的元素应用 display:none 属性。

如果您经常从视图中 删除 和 显示 元素，那么将其 隐藏 而不是 删除 可以提高 性能。

- Thalaivar

Answer 2

.hide()方法相当于.css("display", "none")，而ng-if会从dom中删除元素。这是主要的区别。

jqlite中的.hide()与ng-show/ng-hide指令的作用方式相同。

.ng-hide CSS类在AngularJS中预定义，将显示样式设置为none（使用!important标志）。

https://docs.angularjs.org/api/ng/directive/ngShow

- Karim

---

so ngHide使用.hide()吗？我理解DOM中的区别-我更好奇指令和jquery throwbacks之间的区别。（尽管这仍然非常有帮助） - Kraken

我已经编辑了我的答案。根据文档中的报告，ng-hide样式使用display: none !important隐藏元素，但实际上我认为它使用的是jqlite实现而不是jquery，可能是.css("display", "none")。https://docs.angularjs.org/api/ng/function/angular.element - Karim