javascript-Angular指令链接功能

我是Angular的新手.我正在尝试学习指令.在指令的链接函数中,我记录了我的元素,并看到它是一个数组.为什么是数组？

<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！

解决方法:

当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元素的数组dom-element-1和dom-element-2.

标签：angularjs,dom-events,jqlite,javascript
来源： https://codeday.me/bug/20191028/1952426.html