在Angularjs中的鼠标悬停上弹出一个div

我是AngularJS中的新成员，我如何使用AngularJS在mouseover上弹出一个div。如果我调整鼠标悬停div，它会改变整个结构，如何显示弹出div而不会干扰邻居元素。在Angularjs中的鼠标悬停上弹出一个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上的图像。在此先感谢

来源

2015-05-29 Samyak Jain

使用角度UI引导HTTPS的：//angular-ui.github.io/bootstrap/看看这个plunkr http://plnkr.co/edit/a165oiq4bgmVtFvJebTG?p=preview –

@TheWarlock然后他应该在他的问题中提到......可能他不会，没有任何关于此功能的想法 –

@samyak - 你可能想要尝试基于自定义属性的指令 - https://docs.angularjs.org/guide/directive或者你可以简单地添加使用事件绑定和方法的组合添加到你的范围就像这一个 - http://stackoverflow.com/questions/22532656/NG-鼠标悬停和休假到肘节项-使用鼠标功能于angularjs –

你必须做两件事。首先，你必须绝对定位你的popover元素，以便它在弹出时不会干扰其他元素的流动。像这样的东西（的z-index是什么使得它成为了其他元素）：

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

而在你的HTML标记，你可以使用NG-鼠标悬停指令。

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

如果你有一个以上的，你可能会更好把所有的东西变成一个指令

来源

2015-05-29 06:16:01 dom

在Angularjs中的鼠标悬停上弹出一个div

回答

相关问题