在不引用文档的情况下使用AngularJS获取元素

Get Elements with AngularJS without referencing the document

本文关键字：AngularJS 获取 元素 情况下 引用 引用文 文档      更新时间：2023-09-26

我一直在AngularJS中开发一个高级的基于web的GUI。最近，我决定使用调用document.getElementsByClassName()（我讨厌使用元素收集方法，但在这里我必须使用一个），我的老板打开了访问document元素的盖子。他说我"需要对所有的东西只使用Angular调用"，甚至是元素集合！有没有一种按类名收集元素的"角度方式"？如果是，在Angular框架中使用哪种方式更好？请提供原因。谢谢

更新：为什么我需要使用元素收集器

所以，我真的希望我不必这么做，但我确实…

我使用的是我在网上找到的一个名为Bootstrap DateTimePicker的第三方指令。它很酷，很好看，但它可能有一个bug。。。

首先，我将一个指令绑定到一个属性，声明我传入的元素是"DateTimePicker"。然后，我将该元素传递给DateTimePicker函数。

调用时，此函数会创建一个具有绝对位置的新div，并将其附加到页面的正文中。

现在，我在GUI中打开一个对话框，其中有一个表。在表的每一行，我都有两个DateTimePickers：一个表示结束日期，一个表示开始日期。

我的问题是，一旦我离开屏幕，DateTimePickers的元素被破坏，DateTimePickers仍然存在！如果我再次打开对话框，它还会创建更多这样的div！

在我能够确定这个问题的真正解决方案之前，我决定使用元素收集器作为临时快速修复。我用datetimepicker类获取所有元素，并执行一个：

elem[i].parentNode.removeChild(elem[i]);

没有确切的用例，但知道您正试图在控制器中按类名聚合元素，这让我同意您的观点。将控制器视为一个对象，它向声明性html页面公开数据和服务。数据被绑定到标记中，用于表示和可能的修改。这些服务通常被封装在控制器上的函数中，然后这些函数被绑定到事件处理指令，如ng-click或ng-change。这些服务应该只对您的数据进行操作，并且永远不要接触DOM。如果您需要修改声明性标记中的DOM元素，那么应该通过ng类等指令来完成。

在任何情况下，了解你试图实现的目标都是有用的，这样可以让你更好地了解解决问题的"角度方法"。

好吧，我有答案了。这并不能解决"在不接触文档元素的情况下抓取具有特定类名的所有元素"的问题，但它确实解决了我的问题，并消除了我使用document.getElementsByClassName的需要。

首先，使用DateTimePicker指令的每个元素都有一个element.datetimepicker("remove")函数。

我对每个DateTimePicker:使用一个指令

components.directive('DateTimePicker', function() {
    // Requires bootstrap-datetimestamp.js 
    return {
        restrict: 'E',
        replace: true,
        scope: {
            dateTimeField: '='
        },
        template:
            '<div>' +
                '<input type="text" readonly data-date-format="yyyy-mm-ddThh:ii:ssZ" data-date-time required/>'+
            '</div>',
        link: function(scope, element, attrs, ngModel)
        {
            var input = element.find('input');
            input.
            datetimepicker(
            {
                //stuff
            })
            .on('changeDate', function(ev)
            {
                //more stuff
            });
    ...

为了你的眼球，指令大幅缩短

然后，在销毁input作为其子级的对话框时，我需要从DOM中删除DateTimePicker和它绑定到的input。为此，我在指令中添加了以下内容：

scope.$on("$destroy",function handleDestroyEvent()
{
    input.datetimepicker("remove");
    input = null;
});

它起作用了！DateTimePicker被移除，DateTimePicker对input的句柄被清理，我已经为GC标记了我的input！呜呜！谢谢大家！

如果在AngularJS之前的项目中包含jQuery，Angular将使用jQuery而不是jqLite来执行angular.element函数。这意味着您应该能够使用jQuery的选择器来查找/引用DOM元素。

相关文章：