Question

当鼠标悬停在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>

Answer 1

I was also having this issue. I fixed by using ng-mouseenter on an outer div instead of using ng-mouseover and ng-mouseleave on an inner div instead of ng-mouseout. No flicker!

So:

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

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

1 个答案: