Question

如何在加载＆＃34;下一页＆＃34;时显示加载微调器？在Angular JS网站上？这是JS代码：

var app = angular.module('changePage', [])

app.config(['$routeProvider', function ($routeProvide) {
    $routeProvide
        .when('/', {
            title: 'Home',
            templateUrl: 'home.html',
            controller: ctrl
        })        
        .when('/chisono', {
            title: 'Chi Sono',
            templateUrl: 'chisono.html',
            controller: ctrl
        })
        .when('/video', {
            title: 'Video',
            templateUrl: 'video.html',
            controller: ctrl
        })
        .when('/attrezzatura', {
            title: 'Attrezzatura',
            templateUrl: 'attrezzatura.html',
            controller: ctrl
        })  
        .when('/contatti', {
            title: 'Contatti',
            templateUrl: 'contatti.php',
            controller: ctrl
        })            
        .otherwise({ redirectTo: '/' });
}]); 

app.run(['$location', '$rootScope', function($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
    });
}]);

function ctrl($scope){};

和HTML代码：

<nav class="nav-buttons">
                        <a href="#/chisono"><li></li></a>
                        <a href="#/video"><li></li></a>
                        <a href="#/attrezzatura"><li></li></a>
                        <a href="#/contatti"><li></li></a>
</nav>

目前它仅在加载时显示下一页，同时我想显示加载微调器gif。

如何在我的代码中实现此功能？

Answer 1

在这里查看“selfinterest”答案 - 使用ngProgress [YouTube风格]，它有一个非常优雅的解决方案：

https://github.com/VictorBjelkholm/ngProgress/issues/10#issuecomment-26452176

Answer 2

在我放的index.html页面中：

    <div id="loading">
       <img src="images/loading.gif">
</div>

显然在css文件中显示：none。

在functions.js文件中，我把：

$('#navigation a').on('click', function (){$('#loading').css('display','block');});

最后在我放在document.ready上的每一页中：

$('#loading').css('display','none');

简单，它的工作方式就像它必须工作一样。你怎么看待这个“noob”解决方案？

在Angular JS网站中更改页面时显示加载微调器

2 个答案: