棱角分明的jqlite儿童秀

Angular jqlite child show

本文关键字：jqlite      更新时间：2023-09-26

我尝试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();
    }

谢谢！！

来自角度元素文档

children（）-不支持选择器

因此，代码中的这一行（下面）将不起作用，因为children函数不支持选择器。

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

你只能这样使用孩子：

$(this).children();

由于.children()寻址直接/直接子代，因此它可能会执行您想要的操作（除非您混合了其他直接子代元素）。

如果您需要高级选择器或其他jQuery函数，那么绝对可以将jQuery与Angular一起使用。来自Angular FAQ:

Angular使用jQuery库吗？

是的，Angular可以使用jQuery，如果它存在于您的应用程序中正在引导应用程序。如果您的脚本路径，Angular返回到它自己的jQuery的子集，我们称之为jQLite。

Angular 1.3仅支持jQuery 2.1或更高版本。jQuery 1.7及更新版本可能与Angular一起正常工作，但我们不能保证。

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

在我看来，仅为显示/隐藏子元素使用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>

相关文章：