Question

好吧，所以这可能是一个Angular的东西（在这种情况下我也可能做错了），但它也可能是一个浏览器/ CSS的东西。

“尽可能简单”plunker：https://plnkr.co/edit/t3woLDwynHYgbRDGNZDK 此外，该帖子附有完整代码（可作为代码片段运行）。

这个例子应该非常清楚，但肯定不是很漂亮或以任何方式设计。如果您不想阅读~20行代码，以下是应该发生的事情：

有一个“按钮”，其中包含粘贴图标的区域。单击它时，操作开始。有了它，按钮内部会显示一个微调器（由示波器上的变量控制）。当操作完成时（在示例中由$ timeout模拟），在范围上设置一条消息（想象一下结果信息消息）并关闭微调器控制变量。

当然，意图是旋转器应该始终在框内部（位置：相对）进行渲染，但是在重新编译/重新评估元素的短暂时刻，它会在框上方呈现（或者在中间和上面之间的某处。）

如果您没有看到我直接描述的效果，请单击“清除状态...”按钮并再试一次。此外，您可以尝试$ timeout的不同值。对我来说，$ 20毫秒的超时总是让我在Chrome的盒子上面有一个微调器。 Firefox似乎需要略高的超时，否则它甚至不会在一半的时间内渲染微调器。

我最初认为这是Angular一次重新评估两个元素（重新渲染它们）的效果，这给浏览器提供了一个或两个渲染时间，以便在它仍然显示时错误地实际绘制微调器。但是：

让我感到困惑的是，通过将$ timeout时间调高到200毫秒，问题消失了（或者至少我的眼睛让我相信），让我相信它可能不是一个Angular问题毕竟，但渲染时间一个？也许浏览器（在这种情况下是Chrome，但至少可以在Firefox中重现）不喜欢只在勾选后再次隐藏元素？

ng-show / ng-if在这里没有什么区别。
更改其他图标的微调器图标（并移除旋转）并没有什么区别。

完整代码，因为现在似乎需要：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.message = undefined;
  $scope.loading = false;
  
  $scope.perform = function(event) {
    event.stopImmediatePropagation();

    $scope.loading = true;

    $timeout(function() {
      $scope.message = "Some message...";
      $scope.loading = false;
    }, 35);
  };
  
  $scope.clear = function() {
    $scope.loading = false;
    delete $scope.message;
  };
});

#element .resource {
  position: relative;
  width: 120px;
  margin: 0;
  padding: 10px;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-size: 14px;
  text-align: center;
}

#element .resource .shadow {
  height: 124px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 4px;
  border: 1px dashed #ccc;
  padding-top: 32px;
  color: #bbb;
  cursor: pointer;
}

#element .resource .shadow:hover {
  color: #888;
  border-color: #999;
}

#element .resource .shadow.inactive {
  color: #bbb;
  border-color: #999;
  cursor: default;
  padding-top: 48px;
}

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="alert alert-info" ng-show="message">{{message}}</div>

    <div id="element">
      <div class="resource">
        <div x-ng-show="!loading" class="shadow" x-ng-click="perform($event);">
          <i class="fa fa-paste fa-2x"></i>
        </div>

        <div x-ng-show="loading" class="shadow inactive">
          <i class="fa fa-spinner fa-spin fa-stack-2x text-info"></i>
        </div>
      </div>
    </div>

    <button ng-click="clear();">Clear state...</button>
  </body>
</html>

角度，ng-show和相对位置

0 个答案: