Question

我一直在开发AngularJS中基于Web的高级GUI。最近，我决定使用调用document.getElementsByClassName() （我讨厌使用元素收集方法，但在这里我必须使用一个）并且我的老板翻开盖子以访问document元件。他说我“只需要使用Angular调用所有东西”，即使是元素集合！是否有“Angular方式”按类名收集元素？如果是这样，哪种方式更适合在Angular框架内使用？请说明原因。谢谢！

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

所以，我真的希望我不必这样做，但我确实......

我正在使用我在网上找到的第三方指令Bootstrap DateTimePicker。它非常酷，非常好看，但它可能有一个错误......

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

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

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

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

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

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

Answer 1

没有您的确切用例，但知道您试图通过控制器中的类名汇总元素，这让我同意您的老板。将控制器视为一个对象，它将数据和服务公开给声明性html页面。数据被绑定到标记中以进行呈现和可能的修改。服务通常包含在控制器上的函数中，然后绑定到事件处理指令，如ng-click或ng-change。这些服务应专门针对您的数据运行，而不会触及DOM。如果您需要在声明性标记中修改DOM元素，那么应该通过ng-class等指令来完成。

在任何情况下，了解您要完成的任务将是有用的，这样可以更好地了解解决问题的“角度方式”。

Answer 2

好吧，我有答案。这并没有解决问题＆＃34;抓住具有某个类名的所有元素而不触及文档元素＆＃34;但它确实解决了我的问题，并且无需使用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
            });
    ...

为了你的眼球，

指令大幅缩短......

然后我需要在销毁DateTimePicker是其子代的对话框时删除它绑定到的input和input。为此，我将此添加到我的指令中：

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

它有效！ DateTimePicker被移除，DateTimePicker的{{1}}句柄被清理干净，我已为我的input标记了GC！哇噢！谢谢大家！

Answer 3

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

使用AngularJS获取元素而不引用文档

3 个答案: