自动打开一个菜单，当我们将鼠标悬停在图标（NG-办公室的UI织物）

我想用办公室的UI织物与angularjs，所以我试图用ng-office-ui-fabric。自动打开一个菜单，当我们将鼠标悬停在图标（NG-办公室的UI织物）

为了使命令栏，我发现this example。但是，下拉按钮存在问题（例如，14th）。当我点击14th或其图标时，菜单不会打开。这是正常的吗？

此外，我想实现居然是：当我们再次在其图标，菜单是开放的。

有谁知道如何做到这一点？

PS：a JSBin点击14th未打开菜单（Chrome，mac）。

来源

2017-07-16 SoftTimur

可以使用NG-鼠标悬停事件来实现这一 – Vivz

您可以执行以下操作，悬停设置标志为true，离开将该标志设置为false。

<!DOCTYPE html> 
 
<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
<body ng-app=""> 
 

 
<div ng-mouseleave="val = false" ng-mouseover="val = true" ng-init="val=false">Mouse over me!</div> 
 
<span ng-show="val"> This is being displayed on mouseover</span> 
 

 

 
</body> 
 
</html>

UPDATE：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.min.css" /> 
 
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/2.6.3/css/fabric.components.min.css" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ngOfficeUiFabric/0.15.3/ngOfficeUiFabric.min.js"></script> 
 
</head> 
 
<body ng-app="YourApp"> 
 
    <div ng-controller="YourController"> 
 

 
      
 
     
 
    <a href ng-click="toggleMenu()">14</a> 
 
     <uif-contextual-menu uif-is-open="dynamic.opened"> 
 
     <uif-contextual-menu-item uif-text="'New'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Edit'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Delete'"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-type="divider"></uif-contextual-menu-item> 
 
     <uif-contextual-menu-item uif-text="'Settings'"></uif-contextual-menu-item> 
 
     </uif-contextual-menu> 
 

 
    </div> 
 
    
 
    <script type="text/javascript"> 
 
    angular.module('YourApp', ['officeuifabric.core', 'officeuifabric.components']) 
 
    .controller('YourController', function ($scope) {  $scope.isOpen = true; 
 
     $scope.dynamic = {}; 
 
     $scope.dynamic.opened = false; 
 
     $scope.toggleMenu = function() { 
 
     $scope.dynamic.opened = !$scope.dynamic.opened; 
 
     };}); 
 
    </script> 
 
    
 
</body> 
 
</html>

来源

2017-07-16 13:01:02 Vivz

谢谢......但是我怎么能把这个应用到'uif-contextual-menu'？我甚至不能通过单击来显示它[JSBin]（https://jsbin.com/pegaremuce/1/edit?html,output） – SoftTimur

你可以创建一个plunker或显示一些代码片段，你如何试图实现这个？ – Vivz

与上面的JSBin，我甚至不能显示菜单... – SoftTimur

您可以使用on-mouseover='over()'悬停效果，也写过（）方法。大约第14个不开放 - 不确定，但它适用于我（谷歌浏览器win10）

来源

2017-07-16 12:41:04 Svidlak

我怎么会写'在（）'这打开菜单？另外，你是否在''openMenu（）''的地方写了'ng-click =“openMenu（）''？ – SoftTimur

你使用angulerjs还是角2？ – Svidlak

我使用的角度1.5.7 – SoftTimur

自动打开一个菜单，当我们将鼠标悬停在图标（NG-办公室的UI织物）

回答

相关问题