Angular jqlite Kindershow

Question

Ich versuche jqlite für einige Elemente zu zeigen, aber im Moment habe ich Probleme mit childs, um den Inhalt zu zeigen, wenn die Maus vorbei ist. Ich werde den Code, den ich versuche, und das Original mit jquery setzen.

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

Der Code mit jquery Arbeits

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

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

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

     }); 
    }) 

Der Code Ein Problem, dass ich mit jqlite

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

    } 
    $scope.ProfileOut = function() { 

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

Danke versuchen !!

Answer 1

Aus den Angular Element Documentation

Kinder() - unterstützt keine Selektoren

Deshalb ist diese Linie (unten) im Code wird nicht funktionieren, weil die children Funktionsselektoren nicht unterstützt.

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

können Sie nur Kinder verwenden wie so:

$(this).children(); 

Seit .children() Adresse der direkte/unmittelbare Nachkomme, es ist möglich, dass es tun können, was Sie wollen (es sei denn Sie eine Mischung aus anderen direkten Kinder haben Elemente).

Wenn Sie erweiterte Selektoren oder andere jQuery-Funktionen benötigen, können Sie jQuery mit Angular verwenden. Von der Angular FAQ:

Verwendet Angular die jQuery-Bibliothek?

Ja, Angular kann jQuery verwenden, wenn es in der App vorhanden ist, wenn die Anwendung Bootstrap wird. Wenn jQuery nicht in Ihrem Skriptpfad vorhanden ist, greift Angular auf seine eigene Implementierung der -Untergruppe von jQuery zurück, die wir jQLite nennen.

Angular 1.3 unterstützt nur jQuery 2.1 oder höher. jQuery 1.7 und neuer funktioniert möglicherweise ordnungsgemäß mit Angular, aber wir garantieren das nicht.

So - beachten Sie, dass Sie jQuery 2.1 oder höher verwenden.

Answer 2

Meiner Meinung nach Verwendung ng-mouseover/ng-mouseleave nur für show/hide Kinder Elemente ist zu schwer für die Leistung (weil sie eine Menge von $ Digest() Zyklus aufrufen). Geeigneter wäre die alte gute css pseudoklasse :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>