本文介绍了Angularjs标签加载微调,而渲染的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一些标签页和每个标签都有大量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);

演示:

我做的是,我推 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标签加载微调,而渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 17:41