Question

我是Angular的新手。我试图学习指令。在我的指令link函数中，我记录了我的元素并看到它是一个数组。为什么它是一个阵列？

<mouse-enter>HI</mouse-enter>

JS：

angular.module('custom.directive').directive('mouseEnter', function () {
    return {
        restrict: 'E',
        link: function (scope, element) {
            console.log(element);// this line prints an array!
            element[0].onmouseover = function () {
                console.log('Mouse Entered!');
            };
        }
    }
});

在这种情况下，此数组的长度可以超过1 !!

Answer 1

当jQuery可用时，Angular的jQlite选择器是jQuery函数的别名，否则jQlite将成为Angular内置的jQuery小部分。

因此jQlite或jQuery选择器总是返回数组。

https://docs.angularjs.org/api/ng/function/angular.element

考虑以下DOM结构：

<div id="test">
    <div class="foo bar" id="dom-element-1">Hello</div>
    <p>ignore me</p>
</div>

<span class="foo" id="dom-element-2">Hello again</div>

现在，当您执行以下任一操作：$(".foo")或angular.element(document.querySelectAll(".foo"))时，您将获得一个jQlite或jQuery实例，该实例将是两个dom元素的数组，ID为 dom-element-1 和 dom-element-2 。

Angular指令链接功能

1 个答案: