在Angularjs中鼠标悬停时弹出一个div答案

【问题标题】：popup a div on mouseover in Angularjs在Angularjs中鼠标悬停时弹出一个div
【发布时间】：2015-08-11 21:03:51
【问题描述】：

我是 AngularJS 的新手，如何使用 AngularJS 在mouseover 上显示弹出一个 div。如果我在鼠标悬停时调整 div 的大小，它会改变整个结构，如何在不干扰相邻元素的情况下显示弹出 div。

标记

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

我在标记中添加了额外的东西，例如mouseover 上的公司、大小。帮我在mouseover 上弹出一张图片。提前致谢

【问题讨论】：

使用 angular ui bootstrap angular-ui.github.io/bootstrap 看看这个 plunkr plnkr.co/edit/a165oiq4bgmVtFvJebTG?p=preview
@TheWarlock 那么他应该在他的问题中提到......也许他对这样的功能一无所知
@samyak - 您可能想尝试基于自定义属性的指令 - docs.angularjs.org/guide/directive 或者您可以简单地添加使用添加到您的范围的事件绑定和方法的组合，例如这个 - stackoverflow.com/questions/22532656/…

标签： angularjs angularjs-directive mouseover onmouseover

【解决方案1】：

你必须做两件事。首先，您必须绝对定位您的弹出框元素，以便在弹出时不会干扰其他元素的流动。像这样的东西（z-index 是使它超过其他元素的原因）：

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

在您的 html 标记中，您可以使用 ng-mouseover 指令。

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

您的角度控制器可能看起来像这样

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

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

如果你有多个，你最好把所有的东西都放在一个指令中

【讨论】：