Angular 指令 link 函数

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 选择器总是 returns 数组。

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 指令 link 函数

Angular directives link function

javascript

dom-events

angularjs

jqlite