角指令链接功能

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 实例，这将是一个由两个 ID 为 dom-element-1 的 dom 元素组成的数组和 dom-element-2。