popup-div bei mouseover in Angularjs

Ich bin neu in AngularJS, wie kann ich ein popup-div-Element auf mouseover mit AngularJS. Wenn ich die Größe eines div bei mouseover, es ändert die gesamte Struktur, wie um zu zeigen, popup-div ohne störende Nachbarn-Elemente.

Markup

<div ng-repeat="x in images | filter:test" style="float:left; width:30%"  ng-mouseover="count=1" ng-mouseleave="count=0" >
    <img ng-src="{{x.path}}"
        style="width: 100px; height:100px"><div> {{x.company}}</div>
        <div style="background-color:#E6E6FA;text-align: center;"ng-show="count"> 
            price:{{x.price}}</br>
            size:{{x.size}}</br>

        </div>
        </img>
<div/>

Ich zusätzliche Dinge, die im markup wie Unternehmen,für die Größe auf mouseover. mir helfen im pop ein Bild auf mouseover. Vielen Dank im Voraus

verwenden angular ui bootstrap angular-ui.github.io/bootstrap schauen Sie, diese plunkr plnkr.co/Bearbeiten/a165oiq4bgmVtFvJebTG?p=Album Vorhören
dann sollte er erwähnt in seiner Frage..Kann sein das er nicht eine Idee, über diese Funktion
möchten Sie vielleicht zu versuchen, das benutzerdefinierte Attribut-basierten Richtlinien - docs.angularjs.org/guide/directive ODER Sie können fügen Sie einfach eine Kombination von Ereignis-bindings und Methoden Hinzugefügt, um Ihren Umfang, wie dies ein - stackoverflow.com/questions/22532656/...

InformationsquelleAutor Samyak Jain | 2015-05-29

  1. 8

    Müssen Sie zwei Dinge tun. Erste, Sie haben zu position Ihre popover-element absolute, so dass Sie nicht stören den Fluss der anderen Elemente, wenn es erscheint. So etwas wie dieses (z-index ist, was macht Sie über die anderen Elemente): 

    .popover {
  position: absolute;
  z-index: 100;
}

    Und in Ihren html-markup können Sie die ng-mouseover-Richtlinie. 

    <div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
  more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>

    Ihre eckigen controller wird wahrscheinlich so Aussehen

    $scope.showPopover = function() {
  $scope.popoverIsVisible = true; 
};

$scope.hidePopover = function () {
  $scope.popoverIsVisible = false;
};

    Wenn du mehr als eine haben, sind Sie wahrscheinlich besser, dass alle das Zeug in eine Richtlinie

    InformationsquelleAutor dom

Schreibe einen Kommentar