CODEWITHSUNDEEP
javascriptjqueryangularjs
david raja
david raja

Reputation: 87

Angular jqlite child show

I trying jqlite for show some elements but for the moment i have problems with childs to show the content when the mouse is over. I will put the code that i trying and the original with 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>

The code working with jquery

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

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

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

        });
    })

The code Not working that i trying with jqlite

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

    }
    $scope.ProfileOut = function () {

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

Thank you!!

Upvotes: 0

Views: 194

Answers (2)

axon
axon

Reputation: 4281

On my opinion use ng-mouseover/ng-mouseleave just for show/hide children elements is too heavy for performance (because they call a lot of $digest() cycle). More suitable would be old good css pseudo-class :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>

Upvotes: 1

random_user_name
random_user_name

Reputation: 26170

From the Angular Element Documentation

children() - Does not support selectors

Therefore this line (below) in your code will not work, because the children function does not support selectors.

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

You can only use children like so:

$(this).children();

Since .children() address the direct / immediate descendant, it's possible that it may do what you want (unless you have a mix of other direct children elements).

If you need advanced selectors, or other jQuery functions, you can absolutely use jQuery with Angular. From the Angular FAQ:

Does Angular use the jQuery library?

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.

So - note that you have to use jQuery 2.1 or above.

Upvotes: 3

Related Questions