Angularjs标签加载微调，而渲染 [英] Angularjs tab Loading spinner while rendering

问题描述

我有一些标签页和每个标签都有大量angularjs绑定。这是示例页我在哪里面对issue.Each片用10秒左右来呈现。

I have a page with some tabs and each tab has large amount of angularjs bindings.This is sample page where i am facing issue.Each tabs take about 10 seconds to render.

所以，我计划给加载微调，而标签渲染。
所以我打算点击选项卡中显示加载微调和结束时（ $最后）的NG-重复，删除微调

So i planned to give a loading spinner while tab renders. So i planned to show loading spinner during click on the tab and remove the spinner at the end($last) of the ng-repeat.

在标签上的NG-点击我激活了纺纱装载机

In the ng-click on tab i activated the spinning loader

<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;
 }

要检查纳克重复完成以下指令我已经使用

To check ng-repeat is complete i have used below directive

.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是简单的功能，追加和除去具有一个简单的装载微调股利。

showLoader and removeLoader are simple function which append and remove the div having a simple loading spinner.

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

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

预期结果：纺纱装载器选项卡点击，直到出现NG-重复结束时显示（即点击的标签完全渲染）

Expected result: Spinning loader to be shown when clicked on tab and appear till ng-repeat finishes.(i.e the clicked tab renders completely)

实际结果是：点击选项卡并将其在NG-repaet年底几乎出现，出现几秒钟的分数时，不显示的加载器。 这里你可以观察到上述行为。我认为，网页无法显示的微调由于角度绑定的过程，这使得页面冻结。

Actual result: The loader is not shown when clicked on tab and it appear almost at the end of ng-repaet and appear for a fraction of seconds. Here you can observe the said behavior. I think the page is not able to show the spinner due to the angular bindings process which makes page freeze.

谁能帮我解决这个问题？

Can anyone help me to resolve this?

推荐答案

您可以更改code是这样的：

You can change your code like this:

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

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

我做的是，我推 currentTab 更改为下一个周期的消化。的（这是某种黑客，不是我骄傲的一个解决方案。）的。因此，在第一次消化周期仅加载（ $超时调用之前）被示出。在接下来的摘要周期，阻塞 NG-重复的东西开始工作，但由于我们做出pviously加载可见$ P $，它出现。

What I do is, I push currentTab change to next digest cycle. (It's some kind of a hack, not a solution I proud of.) Therefore, in first digest cycle (before $timeout invoked) only loading is shown. In the next digest cycle, the blocking ng-repeat stuff starts working but since we make loading visible previously, it appears.

：）

这解决您的问题，但运行长期运行，并拦截JavaScript是完全挂起浏览器不是一个很好的用户体验。此外，由于浏览器是完全挂，装载GIF将无法运行动画，不仅是可见的。

This solves your problem, but running long running and blocking javascript that hangs browser completely is not a good user experience. Also, since browser is hang completely, the loading gif will not animate, only will be visible.

这篇关于Angularjs标签加载微调，而渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！