javascript - Angular jqlite child 秀

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

来自Angular Element Documentation

children() - Does not support selectors

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

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

你只能像这样使用子元素:

$(this).children();

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

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

Angular 使用 jQuery 库吗？

Yes, Angular can use jQuery if it's present in your app when the application is being bootstrapped. If jQuery is not present in your script path, Angular falls back to its own implementation of the subset of jQuery that we call jQLite.

Angular 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with Angular but we don't guarantee that.

所以 - 请注意，您必须使用 jQuery 2.1 或更高版本。