角jqlite儿童展

Question

我试着用jqlite来显示一些元素，但是现在我在childs上遇到了问题，在鼠标结束时显示内容。我将使用jquery将我尝试的代码和原始代码放在一起。

  <li ng-mouseover="ProfileIn()" ng-mouseleave="ProfileOut()">
        <div class="face-container" id="carles" >
            <div>
                   <p>This is a description about the employee, and fact about something"</p>
            </div>
        </div>

</li>

使用jquery的代码

   $(".face-container").mouseenter(function () {
        $(".face-container").mouseenter(function () {

            $(this).children("div").show();

        });
        $(".face-container").mouseleave(function () {
            $(this).children("div").hide();

        });
    })

我尝试使用jqlite的代码不起作用

    $scope.ProfileIn = function () {
angular.element(this).children('div').show;

    }
    $scope.ProfileOut = function () {

        angular.element(this).children("div").hide();
    }

谢谢你！！

Answer 1

来自角元文献

子()-不支持选择器

因此，代码中的这一行(下面)将无法工作，因为children函数不支持选择器。

$(this).children("div").show();

您只能使用这样的儿童：

$(this).children();

因为.children()是直接/直接的后代，所以它有可能做你想做的事情(除非你有其他直接子元素的组合)。

如果您需要高级选择器或其他jQuery函数，则绝对可以使用带有角的jQuery。来自角FAQ

角使用jQuery库吗？

是的，棱角可以使用jQuery，如果它在应用程序中，当应用程序被引导的时候。如果您的脚本路径中没有jQuery，那么角返回到它自己的jQuery子集的实现，我们称之为jQLite。 角1.3只支持jQuery 2.1或以上。jQuery 1.7及更高版本可能与角正确工作，但我们不能保证这一点。

因此-请注意，您必须使用jQuery 2.1或更高版本的。

Answer 2

在我看来，使用ng-mouseover/ng-mouseleave仅仅是为了显示/隐藏子元素对于性能来说太重了(因为它们调用了很多$digest()循环)。更合适的是旧的好css伪类:hover。

​

[hover-example] {
  border: 1px dotted;
}

[hover-example] > div {
  display: none;
}

[hover-example]:hover > div {
  display: block;
}

<li hover-example>
        <div class="face-container" id="carles" >
            <div>
                   <p>This is a description about the employee, and fact about something"</p>
            </div>
        </div>

</li>

​