使用angularjs显示加载图标或加载进度条

Cat*_*thy 4 angularjs angular-ui angularjs-directive angular-ui-bootstrap

如何使用angularjs显示加载图标或加载进度条.我的意思是这样,其在jQuery的使用$("body").addClass("loading");,$("body").removeClass("loading");我看到了进度条,一些链接这是像YouTube加载酒吧,但我不希望像我想简单的进度条或加载iage或加载图标或负载酒吧,酒吧展示从模块移动到模块,从选项卡移动到选项卡.是否有任何链接或功能可以清楚地解释如何使用它.

har*_*shr 6

如果你不想自己实现它,下面是几个链接.

角旋转器角度假旋转器

还阅读了这个BLOG,详细介绍了微调器如何与angularjs一起使用

根据评论编辑

app.directive("spinner", function(){
return: {
restrict: 'E',
scope: {enable:"="},
template: <div class="spinner" ng-show="enable"><img src="content/spinner.gif"></div>
}
});
Run Code Online (Sandbox Code Playgroud)

我没有测试代码,但指令不会比这更复杂......


Pra*_*obh 5

视图

<div ng-show="loader.loading">Loading</div>
Run Code Online (Sandbox Code Playgroud)

调节器

$scope.loader.loading = true;  // false
Run Code Online (Sandbox Code Playgroud)

也可以在控制器上添加它

  $scope.loader = { 

              loading : false ,

             };
Run Code Online (Sandbox Code Playgroud)

显示和隐藏加载栏