1

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

为了制作命令栏，我找到了这个例子。但是，下拉按钮（例如14th）存在问题。当我单击14th或其图标时，菜单未打开。正常吗？

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

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

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

4

2 回答 2

2

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

于 2017-07-16T12:41:04.180 回答
0

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

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

于 2017-07-16T13:01:02.127 回答