Question

我想添加一个微调框来显示正在发生的事情，因为在用户点击号召性用语和连接缓慢的移动设备上的下一页之间存在延迟。以下代码可在台式机上运行，并且可在Chrome中模拟，但不能在iOS设备上运行。

<a href="www.mysite.com/next-page"
   ng-click="showLoader();"
>Next Page</a>

<div id="loadScreen" class="load-screen" ng-show="displayLoader">
    <div class="spinner"></div>
</div>

在控制器中

$scope.displayLoader = false;

$scope.showLoader = function(event) {
    $scope.displayLoader = true;
}

使用ng-click在移动设备上的锚标记上是否存在已知问题？我需要做些什么才能使这项工作？实际代码库的href属性中包含php逻辑，因此，我不愿意将URL移入控制器。

Answer 1

您可以在内部使用window.location导航到您的网址，并从定位标记中删除href标记

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.spinner {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<a ng-click="showLoader();">Next Page</a>
<div id="loadScreen" class="load-screen" ng-show="displayLoader">
    <div class="spinner"></div>
</div>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.displayLoader = false;
    $scope.showLoader = function(event) {
        $scope.displayLoader = true;
        window.location = "www.mysite.com/next-page";
    }
});
</script>

</body>
</html>

在标签上触发微调器

1 个答案: