当我们悬停图标时自动打开一个菜单 (ng-office-ui-fabric)

Question

我想将 office-ui-fabric 与 angularjs 一起使用，所以我正在尝试使用 ng-office-ui-fabric.

做命令栏，找到了this example。但是，下拉按钮存在问题（例如，14th）。当我点击 14th 或其图标时，菜单没有打开。正常吗？

另外，我想实现的其实是：当我们悬停它的图标时，菜单是打开的。

有人知道怎么做吗？

PS：JSBin，其中单击 14th 不会打开菜单（Chrome、mac）。

Answer 1

悬停效果可以用on-mouseover='over()'，也可以写over()方法。大约 14 日未开放 - 不确定，但对我有用 (google chrome win10)

Answer 2

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

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

更新:

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

当我们悬停图标时自动打开一个菜单 (ng-office-ui-fabric)

Automatically open a menu when we hover the icon (ng-office-ui-fabric)

javascript

angularjs

ms-office

office-js

office-ui-fabric