问题描述
我有一些标签页和每个标签都有大量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标签加载微调,而渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!