Я хочу добавить счетчик, чтобы показать, что что-то происходит, потому что есть задержка между пользователем, нажимающим на призыв к действию, и следующей страницей на мобильном телефоне с медленным подключением. Приведенный ниже код работает на рабочем столе и в режиме эмуляции в 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-адрес в контроллер.
@JamesHill - Спасибо - проблема в том, что счетчик не отображается. Теперь мне нужно поработать над тем, чтобы он работал для пользователей в приватном режиме.
Вы можете использовать window.location
внутри себя, чтобы перейти к своему URL-адресу и удалить тег 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>
У меня много логики php для создания строки запроса в href. Для рефакторинга кода и переноса построителя запросов в контроллер angular может потребоваться столько же усилий, сколько и на оптимизацию страницы для более быстрой работы, что устранит необходимость в счетчике.