Angularjs选项卡在渲染时加载微调器

Question

我有一个带有一些标签的页面,每个标签都有大量的angularjs绑定.这是我面临问题的示例页面.每个标签大约需要10秒才能呈现.

所以我打算在制表符渲染时给出一个加载微调器.因此,我计划在单击选项卡时显示加载微调器,并$last在ng-repeat 的末尾()移除微调器.

在ng-click on标签上,我激活了旋转装载机

<ul>
    <li ng-repeat="tab in tabs" 
        ng-class="{active:isActiveTab(tab.url)}" 
        ng-click="onClickTab(tab)">{{tab.title}}
   </li>
</ul>

在控制器中

$scope.onClickTab = function (tab) {
     showLoader();
     $scope.currentTab = tab.url;
 }

为了检查ng-repeat是否完整,我使用了以下指令

.directive('onFinishRender', function ($timeout) {    
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {

                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        removeLoader();
});

showLoader和removeLoader是简单的函数,它附加和删除具有简单加载微调器的div.

function showLoader() {
    $('body').append('<div class="loader"></div>');
}

function removeLoader() {
    $('.loader').fadeOut(function () {
        $(this).remove();
    });
}

预期结果:在单击选项卡时显示旋转加载程序并显示直到ng-repeat完成.(即单击的选项卡完全呈现)

实际结果:单击选项卡时未显示加载程序,它几乎出现在ng-repaet的末尾,并显示几分钟.在这里你可以观察到上述行为.我认为由于角度绑定过程导致页面冻结,页面无法显示微调器.

任何人都可以帮我解决这个问题吗？

Answer 1

您可以像这样更改代码:

$timeout(function() {
  $scope.currentTab = tab.url 
}, 100);

演示:http://jsfiddle.net/eRGT8/1053/

我所做的是,我将currentTab更改推到下一个摘要周期.(这是一种黑客,而不是我引以为豪的解决方案.)因此,在第一个摘要周期($timeout调用之前)中,仅显示加载.在下一个摘要周期中,阻塞ng-repeat内容开始工作,但由于我们之前可以看到加载,所以它会出现.

:)

这解决了您的问题,但运行长时间运行并阻止完全挂起浏览器的javascript并不是一个好的用户体验.此外,由于浏览器完全挂起,加载gif不会动画,只会显示.

Answer 2

我强烈建议首先阅读这个SO线程,由AngularJS本人的作者自己编写,解决根本问题.

延迟AngularJS路由更改,直到加载模型以防止闪烁

Misko然后通过建议使用$ routeProvider来回答他自己关于这个主题的问题,如下所示:

 $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: PhoneListCtrl.resolve}). // <-- this is the connection when resolved
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});

以下是您正在寻找的成品/解决方案,这是AngularJS手机演示的增强版:

http://mhevery.github.io/angular-phonecat/app/#/phones

这需要NgRoute(),但这是正确的方法.在这里使用$ timeout对我来说似乎有些惹人注意 - 我不是说你需要ngRoute然而我不知道如何在没有它的情况下将它拉下来(我知道你的标签目前可能没有路由,但我希望它无论如何都有帮助) .

此外,也可以使用angular.element(document).ready(function(){})找到; 对于你的初始有效载荷也将解决你的哇哇.

angular.element(document).ready(function(){
  $('.loading').remove(); // Just an example dont modify the dom outside of a directive!
  alert('Loaded!');
});

你可以看到没有$ timeout(function(){}); 使用任何一种方法,这里是angular.element.ready()的证明工作 - 没有路由器:

工作演示 http://codepen.io/nicholasabrams/pen/MwOMNR

*如果你真的需要我,我可以制作一些标签,但你没有在你的帖子中提供一个有效的代码示例,所以我使用另一个我为另一个线程制作的演示来展示解决方案.

这是另一种解决方案,这次我用你的例子!

http://jsfiddle.net/eRGT8/1069/

这次我在$ index === $ last(ngRepeat()中的最后一个元素)时触发一个函数,这样装载器从dom中移除或者当重复完成其业务时隐藏起来)