使用 ng-clip 和 ng-show/ng-hide 鼠标悬停时按钮闪烁答案

【问题标题】：Button flickering on mouseover with ng-clip and ng-show/ng-hide使用 ng-clip 和 ng-show/ng-hide 鼠标悬停时按钮闪烁
【发布时间】：2015-03-16 19:38:52
【问题描述】：

将鼠标悬停在 ng-clip 增强按钮上时，我看到奇怪的闪烁。当鼠标悬停在封闭的 div 上时，我已经显示/隐藏了 ng-clip 增强按钮。当用户将鼠标移到按钮上时，它会闪烁。我假设这与 Zeroclipboard 和 Angular 代码之间的事件处理有关？

这是显示问题的 Plunker 页面：http://plnkr.co/4gFy9U

Plunker 的代码：

<!doctype html>
<html>
<head>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js"></script>
  <script src="//rawgit.com/asafdav/ng-clip/master/src/ngClip.js"></script>
</head>
<body>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl" ng-mouseover="isHovering = true" ng-mouseout="isHovering = false">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div style="background:red;" class="form-group">
        <label >Copy #1</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
        <button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
      </div>

      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>

<script>
  var myapp = angular.module('myapp', ["ngClipboard"]);

  myapp.config(['ngClipProvider', function(ngClipProvider) {
    ngClipProvider.setPath("//cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.swf");
    ngClipProvider.setConfig({
      bubbleEvents: false
    })
  }]);

  myapp.controller('myctrl', function ($scope) {
    $scope.fallback = function(copy) {
      window.prompt('Press cmd+c to copy the text below.', copy);
    };

    $scope.showMessage = function() {
      console.log("clip-click works!");
    };
  });
</script>

</body  >
</html>

【问题讨论】：

标签： angularjs zeroclipboard ng-clip

【解决方案1】：

我也遇到了这个问题。我通过在外部 div 上使用 ng-mouseenter 而不是在内部 div 上使用 ng-mouseover 和 ng-mouseleave 而不是 ng-mouseout 来修复。无闪烁！

所以：

<div ng-app="myapp" ng-mouseenter="isHovering = true">
  <div class="container" ng-controller="myctrl" ng-mouseleave="isHovering = false">

    <div class="page-header">
      <h1>ngClip <small>example</small></h1>
    </div>

    <form>
      <div style="background:red;" class="form-group">
        <label >Copy #1</label>
        <input type="text" class="form-control" placeholder="Enter text to copy" ng-model="copy1">
        <button ng-if="isHovering" class="btn btn-default" clip-copy="copy1">Copy!</button>
      </div>

      <br/><br/><br/>

      <textarea class="form-control" rows="3" placeholder="paste here"></textarea>
    </form>
  </div>
</div>

【讨论】：